I've got a create-react-app with a couple of routes. Every now and then as I change branches etc, I notice routing doesn't work. I reckon the only time it has worked its because of caching.
Below are my routes, I've replaced the blog route with a simple p tag for simplicity as I began to think it was relating to the component I was linking to.
App.tsx
const history = createBrowserHistory();
...
<Router history={history} data-test="component-app">
<Switch>
<Route exact path="/" component={Main} />
<Route path="/blog">
<p>test</p>
</Route>
</Switch
</Router>
Main.tsx
import React from "react";
import { Link } from "react-router-dom";
export const Main = () => {
return (
<Link to="/blog">Blog</Link>
)
}
Here's what happens:
Click on Blog link in Main = route in browser changes to localhost:9600/blog BUT there's no content, just a white page
Refresh the page whilst on localhost:9600/blog and you get the <p>test</p> part
But why isn't it showing test as soon as you click on the link?
Versions I'm using:
react-router-dom: "^5.2.0"
react-scripts: "4.0.1"
react: "^17.0.1"
history: "^5.0.0"
Any ideas?
For React-Router-Dom to work perfectly fine, make sure your entire application is wrapped with BrowserRouter which is best in your indexJS just like that below, a sample of the indexJS file
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
Usually when I want to render some JSX inside a ‘Route’ and I don’t want to create a different component I use the ‘render’ prop that receives a function and should return the JSX you want to be rendered.
Try this:
<Route path=“/blog” render={() => <p>test</p>} />
Changing Router to BrowserRouter in App.js worked!
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
...
return (
<Router history={history} data-test="component-app">
<Switch>
<Route exact path="/">
<Main />
</Route>
<Route path="/blog">
<p>test</p>
</Route>
</Switch>
</Router>
);
Thanks all for your help!
Thanks this worked for me by importing BrowserRouter as Router:
import { BrowserRouter as Router, Route } from 'react-router-dom';
and updating "react-router-dom": "^5.2.0" to "react-router-dom": "^5.3.0"
What worked for me was installing react-router-dom 5, instead of 5.2.0 I previously had. The command is:
npm install react-router-dom#5
I am using react-router-dom in a redux app.
This is my initial setup in index.js:
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));
Then in my App.js I have:
render() {
return (
<div className="App">
<Route exact path="/" render={ () => {
return (
<div>
{
this.props.categories.map((category)=>{
console.log('category', category)
return (
<Link key={category.name} to="/category" >{category.name}</Link>
)
})
}
</div>
)
}}
/>
<Route path="/category" render={ () => {
console.log('category path this.props', this.props)
return (<p>Category is whatever</p>)
}}
/>
</div>
);
}
I would think that whenever I click any of the Links displayed the browser would automatically know how to render the new Route path /category but for some reason it does not.
What am I doing wrong?
The above post by Dane has the solution.
But in the spirit of presenting the solution with more clarity, I will copy and paste the relevant codes that made react router work well with redux and other middleware.
import { withRouter } from 'react-router-dom'
export default withRouter(connect(
mapStateToProps,
)(App))
From React Router docs,
Generally, React Router and Redux work just fine together.
Occasionally though, an app can have a component that doesn’t update
when the location changes (child routes or active nav links don’t
update). This happens if:
The component is connected to redux via
connect()(Comp).
The component is not a “route component”, meaning it
is not rendered like so: <Route component={SomeConnectedThing}/>
The
problem is that Redux implements shouldComponentUpdate and there’s no
indication that anything has changed if it isn’t receiving props from
the router. This is straightforward to fix. Find where you connect
your component and wrap it in withRouter.
So maybe it's a problem with using render props. So:
either replace render with component, or
try their solution, with withRouter ( even there you have to make them into components )
https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates
Both Link and Router is compulsory.
Not Work!
import { BrowserRouter as Link } from "react-router-dom";
Work in my case.
import { BrowserRouter as Router, Link } from "react-router-dom";
In my case, this is working properly. If you will import router and link both together.
import { BrowserRouter as Router, Link } from "react-router-dom";
I am having trouble changing the view in react with routing. I only want to show a list of users, and clicking on each user should navigate to a details page. Here is the router:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";
ReactDOM.render((
<BrowserRouter>
<div>
<Route path="/" component={Users} />
<Route path="/details" component={Details} />
</div>
</BrowserRouter>
), document.getElementById('app'))
When I use the url /details my browser navigates to that url, but does not change the view. Any other route throws 404 so it seems to recognize the route but not update.
You need to specify the attribute exact for your indexRoute, otherwise for even /details route it will still match with / . Also try to import Route from react-router-dom
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import Users from "./components/Users";
import Details from "./components/Details";
ReactDOM.render((
<BrowserRouter>
<div>
<Route exact path="/" component={Users} />
<Route path="/details" component={Details} />
</div>
</BrowserRouter>
), document.getElementById('app'))
UPDATE:
Another thing that you need to do is to attach your component Users with withRouter. You need to make use of withRouter only when your component is not receiving the Router props,
This may happen in cases when your component is a nested child of a component rendered by the Router or you haven't passed the Router props to it or when the component is not linked to the Router at all and is rendered as a separate component from the Routes.
In Users.js add
import {withRouter} from 'react-router';
.........
export default withRouter(Users)
DOCS
You just have to wrap the components inside withRouter.
<Route exact path="/mypath" component={withRouter(MyComponent)} />
Here is a sample App.js file:
...
import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={withRouter(Home)} />
<Route exact path="/profile" component={withRouter(Profile)} />
</Switch>
</Router>
);
}
}
export default App;
Additional
If you are using react router, componentWillReceiveProps will get called whenever the url changes.
componentWillReceiveProps(nextProps) {
var currentProductId = nextProps.match.params.productId;
var nextProductId = nextProps.match.params.productId; // from the new url
...
}
Note
Alternatively, you may also wrap the component in withRouter before exporting, but then you have to ensure a few other things. I usually skip this step.
export default withRouter(Profile)
I had the same issue and discovered that it was because I had a nested router. Once I removed the nested router, and simply put my component-specific routes within a switch component--the issue was resolved without having to use withRouter or make any additional changes.
<Router> // <--Remove nested Router
<Switch>
<Route exact path="/workflows" component={ViewWorkflows} />
<Route path="/workflows/new" component={NewWorkflow} />
</Switch>
</Router>
Yusufbek is describing a similar issue. I think it's a lot cleaner to store the component related routes at a view level versus storing all of them in one main router. In a production app, that's going to be way too many routes to easily read through and debug issues.
React Router v5 doesn't work with React 18 StrictMode
https://github.com/remix-run/react-router/issues/7870
I have faced the same problem but I fixed it. I have placed the home page as the last. It works for me. Just like below.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";
ReactDOM.render((
<BrowserRouter>
<div>
<Route path="/details" component={Details} />
<Route path="/" component={Users} />
</div>
</BrowserRouter>
), document.getElementById('app'))
I had a similar issue but with different structure. I've added one Router that will handle all routes, I've used Switch component to switch views. But actually, it didn't. Only URL changed but not view. The reason for this was the Link component used inside of SideBar component which was outside of the Router component. (Yes, I've exported SideBar with "withRouter", not worked).
So, the solution was to move my SideBar component which holds, all Link components into my Router.
The problem is in my linkers, they are outside of my router
<div className="_wrapper">
<SideBar /> // Holds my all linkers
<Router>
<Switch>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</Router>
</div>
Solution was moving my linkers into my router
<div className="_wrapper">
<Router>
<SideBar /> // Holds my all linkers
<Switch>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</Router>
</div>
I had the same issue with react-router-dom 5
The problem was caused by the history package.
The version I was using was 5.0.0 but they don't work together.
Fixed by downgrading history to 4.10.1
Related issue: https://github.com/ReactTraining/history/issues/804
BrowserRouter fails to maintain history in your case. Use "Router" instead, Usage of this with custom history as props may help resolve your problem.
import {Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import {createBrowserHistory} from 'history';
export const customHistory = createBrowserHistory(); //This maintains custom history
class App extends Component {
render() {
return (
<Router history={customHistory}>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/profile" component={Profile} />
</Switch>
</Router>
);
}
}
export default App;
Then in your components, import customHistory from 'App' and use that to navigate.
customHistory.push('/pathname');
Hope This help! :)
When using Redux and I had similar issues where the url was updating in the address bar but the app was not loading the respective component. I was able to solve by adding withRouter to the export:
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(MyComponentName))
According to this issue here, react-router-dom isn't compatible with React 18 because BrowserRouter is a child of StrictMode.
So to resolve the issue.
Instead of this:
<React.StrictMode><BrowserRouter>...</BrowserRouter></React.StrictMode>
Do this:
<BrowserRouter><React.StrictMode>...</React.StrictMode></BrowserRouter>
It worked for me this way, I hope it helps.
In my case, I'd mistakenly nested two BrowserRouters.
You need to add exact to the index route and rather than enclosing those Route components by div, use Switch from react-router-dom to switch between the routes.
import React from "react";
import ReactDOM from "react-dom";
import { Route, Switch } from 'react-router-dom';
import Users from "./components/Users";
import Details from "./components/Details";
ReactDOM.render((
<div>
<Switch>
<Route path="/" component={Users} exact/>
<Route path="/details" component={Details} />
</Switch>
</div>
), document.getElementById('app'))
I Tried adding "exact" in front of the home path
like this
<Route exact path="/" component={Home}></Route>
It is working fine...
I had similar issue with React Router version 4:
By clicking <Link /> component, URL would change but views wouldn't.
One of views was using PureComponent rather than Component (imported from react) and that was the cause.
By replacing all route rendered components that were using PureComponent to Component, my issue was resolved.
(Resolution source: https://github.com/ReactTraining/react-router/issues/4975#issuecomment-355393785)
None of the answers here solved my issue, turns out I had to add a dependency to my useEffect hook. I had something like this:
App.js
<Route
path="/product/:id"
component={MyComponent}
/>
MyComponent.jsx
const { id } = useParams();
useEffect(() => {
fetchData();
}, []);
I had a button to change to another product, which would only update the :id on the url, I could see the url changed, but no effect on the page. This change fixed the issue:
MyComponent.jsx
const { id } = useParams();
useEffect(() => {
fetchData();
}, [id]); // add 'id' to dependency array
Now when the id changes, it trigger a function to update the data and works as expected.
Hmm there no any SWITCH to actually switch views.
this is how i use router to switch from landin page to main site
//index.jsx
ReactDOM.render( (<BrowserRouter><App/></BrowserRouter>), document.getElementById('root') );
//App.jsx
render()
{
return <div>
<Switch>
<Route exact path='/' component={Lander}/>
<Route path='/vadatajs' component={Vadatajs}/>
</Switch>
</div>
}
https://jsfiddle.net/Martins_Abilevs/4jko7arp/11/
ups i found you use different router ..sorry then maybe this fiddle be for you useful
https://fiddle.jshell.net/terda12/mana88Lm/
maybe key of solution is hiden in line for main render function ..
Router.run(routes, function(Handler) {
React.render(<Handler />, document.getElementById('container'));
});
I was facing similar issue I resolve to like this please have a look I hope it's working.
You need to use componentWillReceiveProps function in your component.
clicked a link first time by calling url www.example.com/content1/ componentDidMount() is run.
Now when you click another link say www.example.com/content2/ same component is called but this time prop changes and you can access this new prop under componentWillReceiveProps(nextProps) which you can use to call API Or make state blank and get new data.
componentWillReceiveProps(nextProps){
//call your API and update state with new props
}
For me, I had:
export MyClass extends React.Component
with:
export default withRouter(MyClass)
Meanwhile, in my App.js, I had:
import { MyClass } from './MyClass'
Those playing the home game can see my problem. I was not getting the import with the Router passed into the child classes. To clean this up, I moved the withRouter call into the Route component declaration:
<Router exact path={'/myclass'} component={withRouter(MyClass)} />
Back in MyClass, I changed it to a default export:
export default MyClass extends React.Component
And then finally, in App.js, I changed my import to:
import MyClass from './MyClass'
Hopefully this helps someone. This ensures I didn't have two ways to export the same class, thus bypassing the withRouter prepend.
I also had the same problem. Although it is not a very effective solution, I solved it with a cunning method.
The ComponentDidMount method works every time our url changes.
Within the method we can compare the previous url with the current url and we can the state change or page refresh.
componentDidUpdate(prevProps) {
if (this.props.match.url !== prevProps.match.url) {
//this.props.history.go(0) refresh Page
//this.setState(...) or change state
}
}
<Route exact path="/" component={Users} />
<Route exact path="/details" component={Details} />
I was also facing the same issue which was resolved using the exact attribute. try to use the exact attribute.
I met trouble too.
https://github.com/chengjianhua/templated-operating-system
And I have tried the solutions metioned by Shubham Khatri, but It doesn't work.
I solved this problem, maybe can help you.
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md
According the above guide document, when you use PureComponent or use with state management tools like redux, mobx ... It may block the update of your route. Check your route component, ensure you did't block the rerender od your component.
You should check this out: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md
Therefore it's definitely not Users or Details, because they are directly rendered by <Route>, and the location will get passed to props.
I am wondering, why do you need the <div> between <BrowserRouter> and <Route>? Remove that and let me know if it works.
I had a similar issue with a conditional Layout:
class LayoutSwitcher extends Component {
render () {
const isLoggedIn = this.props.isLoggedIn
return (
<React.Fragment>
{ isLoggedIn
? <MainLayout {...this.props} />
: <Login />
}
</React.Fragment>
)
}
}
and rewrote the conditions like so:
render () {
const isLoggedIn = this.props.isLoggedIn
if (isLoggedIn) {
return <MainLayout {...this.props} />
}
return <Login />
}
This solved it. In my case, it seems that the context was lost.
I get the same Issue.
I don't think that in this case he needs to add the prop withRouter,
just check in your NavLink you write the good path name as details.
for the route try to start from the specific route to the general one like
<Route path="/details" component={Details} />
<Route path="/" component={Users} />
in your NavLink it should be something like this
<NavLink className="nav-link" to="/details">
details<span className="sr-only">(current)</span>
</NavLink>
a remarque for the import its better to start by importing all stuff related to React after that import the other module
like this one:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";
come like this:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import { Router, Route } from "react-router";
import Users from "./components/Users";
import Details from "./components/Details";
In my case, switching to HashRouter instead of BrowserRouter solved my issue
I was accidentally using a BrowserRouter around my Link's.
<BrowserRouter>
<div>
<Link to="/" component={Users} />
<Link to="/details" component={Details} />
</div>
</BrowserRouter>
If you just started having this issue recently, take a look at https://github.com/remix-run/react-router/issues/7415
The issue is with react-router-dom 5+ and the history dependency.
If you installed it separately using yarn install history you need to uninstall it, do yarn install history#4.10.1
In my case it wasn't working because I imported Browser Router as Router, Like This:
<Router>
<div> <Navbar/></div>
<Routes>
<Route exact path="/" element={<Pageone/>}></Route>
<Route path="/home" element={<Home/>}></Route>
<Route path="/about" element={<About/>}></Route>
<Route path="/contact" element={<Contact/>}></Route>
</Routes>
<div><Footer /></div>
</Router>
</div>
Then It was fixed by adding BrowserRouter instead:
<BrowserRouter>
<div> <Navbar/></div>
<Routes>
<Route exact path="/" element={<Pageone/>}></Route>
<Route path="/home" element={<Home/>}></Route>
<Route path="/about" element={<About/>}></Route>
<Route path="/contact" element={<Contact/>}></Route>
</Routes>
<div><Footer /></div>
</BrowserRouter>
</div>
Hope this helps someone!
Try this,
import React from "react";
import ReactDOM from "react-dom";
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";
ReactDOM.render((
<Router>
<Route path="/" component={Wrapper} >
<IndexRoute component={Users} />
<Route path="/details" component={Details} />
</Route>
</Router>
), document.getElementById('app'))
I had the same issue and I fixed it importing the history from the #types folder in node_modules. I imported it from npm (npm i #history)
I am new to ReactJs. This is my code:
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));
and compiling it with webpack. Also I added Main component to my aliases.
The console throws these errors:
I also read these links :
React Router failed prop 'history', is undefined
How do I resolve history is marked required, when value is undefined?
Upgrading React-Router and replacing hashHistory with browserHistory
and many searches around the web, but I couldn't fix this issue. React Router is version 4
If you are using react-router v4 you need to install react-router-dom as well. After that, import BrowserRouter from react-router-dom and switch Router for BrowserRouter. It seems that v4 change several things. Also, the react-router documentation is outdated. This is my working code:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App';
ReactDOM.render((
<BrowserRouter>
<Route path="/" component={App}/>
</BrowserRouter>
),
document.getElementById('root')
);
Source
Which version of React Router are you using? Router version 4 changed from passing in the browserHistory class to passing an instance of browserHistory, see the code example in the new docs.
This has been catching lots people who automatically upgrade; a migration document will be out 'any day now'.
You want to add this to the top:
import { createBrowserHistory } from 'history'
const newHistory = createBrowserHistory();
and
<Router history={newHistory}/>
If you want to have multiple routes you can use switch like this,
import {Switch} from 'react-router';
then
<BrowserRouter>
<Switch>
<Route exact path="/" component={TodoComponent} />
<Route path="/about" component={About} />
</Switch>
</BrowserRouter>
I got the same problem in ES6, but when I switched to use 'react-router-dom' library, the problem was solved. For all fans of ES6, here we go:
npm install --save react-router-dom
In index.js:
import {HashRouter, Route} from 'react-router-dom';
import App from './App';
ReactDOM.render(
<HashRouter>
<Route path="/" component={App}/>
</HashRouter>
,
document.getElementById('root')
);
Version 4 of React Router changed several things. They made separate top level router elements for the different history types. If you're using version 4 you should be able to replace <Router history={hashHistory}> with <HashRouter> or <BrowserRouter>.
For more detail, see https://reacttraining.com/react-router/web/guides
For (year 2022) version "react-router-dom": "^6.3.0" if anyone is still facing this issue check the order of import in App.js file.
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
I don't know why the order matters but it worked for me.
Also this might help: Attempted import error: 'Switch' is not exported from 'react-router-dom'
I also write a Login practice. And also meet the same question like you. After a day struggle, I found that only this.props.history.push('/list/') can make it instead of pulling in a lot of plugins. By the way, the react-router-dom version is ^4.2.2. Thanks!
handleSubmit(e){
e.preventDefault();
this.props.form.validateFieldsAndScroll((err,values)=>{
if(!err){
this.setState({
visible:false
});
this.props.form.resetFields();
console.log(values.username);
const path = '/list/';
this.props.history.push(path);
}
})
}
The below works for me with "react-router#^3.0.5":
package.json:
"react-dom": "^16.6.0",
"react-router": "^3.0.5"
index.js:
import { render } from 'react-dom'
import { App } from './components/App'
import { NotFound404 } from './components/NotFound404'
import { Router, Route, hashHistory } from 'react-router'
render(
<Router history={hashHistory}>
<Route path='/' component={App} />
<Route path='*' component={NotFound404} />
</Router>,
document.getElementById('root')
)