please provide solution for this
https://codesandbox.io/s/pass-data-routing-link-forked-g6ef2?file=/src/router/AppRouter.js
You are using React Router v6. In v6, the Link component needs the state to be passed directly as prop instead of inside to. Like this
<Link
className="btn btn-primary"
to={{
pathname: "/details"
}}
state={state}
>
Register
</Link>
Also you need to use the hook to get location in the Details component.
const location = useLocation();
See the docs for more details. https://reactrouter.com/docs/en/v6/api#link
EDIT: Here is the updated code.
https://codesandbox.io/s/pass-data-routing-link-forked-v2zctg?file=/src/components/Details.js:122-130
Related
Could someone advise me to use like scroll reveal for vue3, I couldn't find any forum and if so please explain to me exactly how to import scroll reveal for vue3
I've already tried different libraries, but all are for vue3, and the transition belonging to vue3 wouldn't work very well as scrollreveal
enter image description here
The Vue 3 branch for vue-scroll-reveal is not released on NPM, but you can add the library as a dependency using the project's github's URL. You will need to install it together with the dependency "scrollreveal" with yarn or npm like so:
yarn add scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
or
npm i scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
The Github README also describes how to use the library in a component which I've pasted below:
If using default options
<script setup>
import { vScrollReveal } from 'vue-scroll-reveal';
</script>
OR if using custom default options
<script setup>
import { createScrollRevealDirective } from 'vue-scroll-reveal';
const vScrollReveal = createScrollRevealDirective({
delay: 1000,
duration: 150,
});
</script>
I'm experiencing a problem in my vue-cli created application. The following does not work:
<component :is="'v-text-field'"></component>
However a simple <v-text-field /> works great
The error is:
Unknown custom element: <v-text-field> - did you register the component correctly?
Does someone knows why? I can't reproduce it on codepen
Are you using vuetify-loader with tree-shaking? If so, you may just want to import {VTextField} from 'vuetify/lib' and add components: { VTextField }
I'm using Ember 2.7.0 of course with ember-cli.
I come from Rails, I used to put in "assets/application.js" all my javascript like, for example:
var ready = function () {
myFunction('test');
$('#btn-fluid').on('click', function () {
$('#myPage').toggleClass('container')
});
}
document.addEventListener("turbolinks:load", function () {
ready()
})
Now with Ember where I have to put this code in my application?
I read on the web the use of:
Ember.Application.create({
ready: function () {
});
but I don't know how to put this code: in app.js maybe, but I already have:
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
and if I create another file in the root, like for example "mycode.js" like this:
import {Ember} from 'ember';
let myCode;
myCode = Ember.Application.create({
ready: function () {
console.log('Test!');
}
});
export default myCode;
and import it in application using ember-cli-build.js here:
...
app.import('mycode.js');
it compile the big js with my code, but it doesn't work at all my ready function.
How to do?
I have to use Components? Maybe an application component?
Which is the best Ember way for top performances?
To start working with Ember is a must to know Ember's structure and the way Ember works, Simply you need to use Ember guideline to get the best performance. I will explain you some steps and example and I hope it will help you to understand more.
First of all check this image
1. Review Ember Guides and API Docs
In addition, it's a good to review this repository on Github as well. https://github.com/emberjs/guides/ which will help developers to get used to Ember.
2. Install Ember-CLI
Ember-CLI is a command line interface which has been designed for creating Ember apps that strongly favor convention over configuration.
3. Install the Ember Inspector Extension
The Ember Inspector Extension is super-useful for debugging your Ember app.You may also find Chrome app on Google play.
4. Read “From Rails To Ember”
Since you know Ruby on Rails and you are a developer of that, it is essential that you read the tips compiled in From Rails To Ember.
5. Get to Know Ember.Component
A simple way to think of an Ember component is that it is a combination of controller and view, isolated and reusable:
You should pass in the state you need to the component.
Components should communicate with their parent scope (e.g, controller
or another component) by sending actions.
Parent scope (e.g., controller or another component) communicates with
the component by changing the data state that it has passed to the
component.
As an example I am going to explain some part of your code.
You have this
$('#btn-fluid').on('click', function () {
$('#myPage').toggleClass('container')
});
and probably this is your HTML code
<a id="btn-fluid">Whatever for CLICK </a>
<div id="myPage" class="">dummy text </div>
However, in Ember what would be the best practice to use Actions in your Route or Controller to define your action function for example your code in Ember will be something like this :
myPage: null,
actions: {
clickOnbtnFliud() {
this.set('myPage', 'container');
}
}
and HTML in the same template for the controller would be like
<a {{action 'clickOnbtnFliud'}}>Whatever for CLICK </a>
<div class="{{myPage}}">dummy text </div>
In Summary,
You may use Components as you need which is the best practice for your Ember Application but you need to understand where you have to create that.
You rarely need to edit Ember-Cli-Build.js unless you want to insert extra plugins library or ... but I don't recommend you to insert your internal JS files as you can simply convert it to Ember Native codes. For instance you don't need to do this app.import('mycode.js'); but you can simply create your Route and add your custom code like I said as an example before to your Route or Controller or Components.
What I can assure you is if you user Ember in the way that you can find in Guidelines in Ember website, You don't need to worry about performance.Just try to user Ember Native way to implement your code.
Last word, As much as possible keep yourself motivated to use EmberAddons rather than thirdparty plugins and always choose the best updated addons not all of them. Search for best Addons and popular ones and use it.
Hope this guide help you.
I'm playing around with the phoenix framework. I copied the chat example entirely but I'm not getting any results.
In fact when I write console.log("testing") in my app.js I notice that my console does not log anything...
I am getting the error referenced in this link:
phoenix framework - invalid argument at new Socket - windows
However that error seems to be related to Brunch not working in windows. When I brunch build, I can confirm that app.js has the console.log("testing") that I included.
Nevertheless, I don't see that console log when I visit my localhost:4000.
Why is JS not executing?
Turns out the guide is missing a key line that made it not work.
The guide has the following:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
</body>
But that is missing the below line which you can put above the body tag.
<script>require("web/static/js/app")</script>
Even as Chowza already solved this question I would like to propose another, possible cleaner solution, using the autoRequire feature of Brunch.io.
The problem occurs because Brunch.io does not autoRequire the app.js under Windows correctly. Chowza worked around this issue by requiring the file manually in the html. You can omit the manual require if you alter the /brunch-config.js as follows: Change from
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
}
To
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"],
"js\\app.js": ["web/static/js/app"]
}
}
This way the app.js is autoRequired, even if you work on a Windows based system.
I would like to mention, that this solution is based on the link Chowza himself posted, so all credit goes to him for pointing to the link.
I'm working with jquery.steps plugin, but when I open the page in browser, I get the message 'TypeError: $(...).steps is not a function'. Here is my example code (I'm using Laravel):
{!! HTML::script(asset("/js/wizard.js")) !!} {{-- wizard.js contains jquery.min.js and jquery.steps.min.js, generated via gulp --}}
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
<script>
var wizard = $("#wizard").steps();
wizard.steps("add", {
title: "HTML code",
content: "<strong>HTML code</strong>"
});
</script>
Am I missing something basic, or this is not working as expected. Any suggestion is appreciated.
Thanks in advance
Make sure you do not import jquery twice. If you downloaded your jquery.steps library via a package manager, it might have downloaded jquery library as a dependency of jquery.steps so that causes a conflict with your already imported jquery file. You can also try to use a standalone version of jquery.steps.