Console throwing errors when I used React router
Have followed the router-dom v6 syntax still not able to render components
the console errors state that you did a default import for the Home, About, and Profile components, verify if you did a default or named export for those three components
This error appear when you have V6 of react-router-dom. V6 have many groundbreaking change so try to read official documentation check this out:https://reacttraining.com/blog/react-router-v6-pre/
Check this for more details
https://stackoverflow.com/a/70075248/11729240
Related
I am using the react js router to navigate around. Now my question is how can I change the url in address bar from inside a component?
Suppose I have url as follows: https://websitename/loc/lib/12, and I have a dropdown list with some numbers which when selected, it should change the url above, ie: the number after the /lib/...<--.
What is the best way to modify it? Do I have to change it by pushing the change up the component till it reaches the page where the react router is declared? Or should I change it direclty in the page by using window.location.href?
Information:
React version: 17.0.1
React-router-dom: 4.3.1
Using React js classes (not react hooks).
See navigating in the documentation.
Get the navigate function from the useNavigate hook.
Since it is a hook you can get it directly in the component that renders the <select> element.
Then call it:
onChange={ event => navigate(`/loc/lib/${event.target.value}`) };
NB: This assumes React Router v6. It is a significant change over the equivalent functionality in old versions of React Router.
Before react router v6: You can use useHistory from the history package, which you probably already have in use, and use e.g. push from the history object to go to a new location.
I am new to redux. I have experience with react context-api. This is my first time using redux. I have all the latest versions installed of redux, react-router, styled-components from their official websites. I have no idea what to do about this error. Please help me get out of this mess.
This is my Pakage.JSON as well as the error shown in localhost
This is where I used my component
This my index.js and appSlice.js
It's not a redux issue, but a react hook that is not used in the right place, I think we need more code to understand the problem
Its not a question about how to switch from hashHistory to browserHistory.
When we input http://www.example.com/#post, it will be recognized as http://www.example.com/post in react-router previous version. but this behavior changes in v4.
http://www.example.com/#post will be treated as http://www.example.com/.
What should I do to bring the previous one back?
Its important on my react project static serving. Thanks!
Both have Route, Link, etc. When to use one or the other? I'm really confused on where to use each one. Server side? Client side?
https://reacttraining.com/react-router/
In some examples you need to pass the history, in others not. What to do?
<Router history={browserHistory}>
vs
<Router>
It's really confusing on when to use one or the other, any help appreciated.
react-router contains all the common components between react-router-dom and react-router-native. When should you use one over the other? If you're on the web then react-router-dom should have everything you need as it also exports the common components you'll need. If you're using React Native, react-router-native should have everything you need for the same reason. So you'll probably never have to import anything directly from react-router. As far as when you use
<Router history={browserHistory}>
vs
<Router>
In RRv4 you won't need to pass down browserHistory, that was just for previous versions of the router.
If you're still confused, you can check out the details on each package here
react-router-dom is a react-router plus:
<BrowserRouter> which is
<Router history={browserNativeHistoryApiWrapper}/>
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js
some Link improvements for browser
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
and with <NavLink> — wrapper that knows if it's "active" or not
proof: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
Just use react-router-dom - react-router-dom re-exports all of react-router. The link on GitHub answer (what's the diff between react-router-dom & react-router?).
In v4, react-router exports the core components and functions.
react-router-dom exports DOM-aware components, like <Link> ( which
renders <a>) and (which interacts with the browser's
window.history ).
react-router-dom re-exports all of react-router's exports, so you
only need to import from react-router-dom in your project.
(Source: GitHub)
Found this in the Github.
Note: This package provides the core routing functionality for React Router, but you might not want to install it directly. If you are writing an application that will run in the browser, you should instead install react-router-dom. Similarly, if you are writing a React Native application, you should instead install react-router-native. Both of those will install react-router as a dependency.
Source: https://github.com/remix-run/react-router/tree/main/packages/react-router
What is the equivalent of Router.create (react-router v0.13) in react-router v1.0?
var router = Router.create({
routes: routes,
location: null // Router.HistoryLocation
});
I want to create a reference for the router to be used outside of the DOM.
router.transitionTo('app');
The code snippet above is the ones in v0.13. Wondering if anyone knows how to write them in react-router v1.0.
I have gone through the documentation of react-router, and I had found the createRoutes function. I had no idea how to use it. Please help me on this.
React Router as of v1.0 is now more modular than that. Things like navigation are functions of a "history" object rather than the router itself, which only handles routing.
To do the equivalent with React Router v1.0, you would instantiate the history object outside the router, then do whatever you want with it. There's more detailed documentation available at the guide for navigating outside of components: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/NavigatingOutsideOfComponents.md.
In v1 Router is a component, the routes are children, and history is a prop:
import { createHistory } from 'history'
import { Router } from 'react-router'
<Router history={createHistory()}>{routes}</Router>
Edit: now I recommend you still install the history module, but import 'browserHistory' from react-router which provides a thin layer on top of it
In your top level component you can access props.history.pushState(state, pathname, query) (further down you'll have to pass it through or use the mixin with createClass or something):
this.props.history.pushState(null, 'contact');
You use a history object for this in v1.0.0 - if you don't pass Router one, it will create one for you.
See Getting Started for how to create a history object and Navigation for how to use it to perform navigation.