React router changes url but not view

Question

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.

Cantatrice

Answer 1

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

Hatbox

proptypes warning can be removed by installing npm install -S 'prop-types' and replacing React.PropsTypes with PropTypes . Also update your package.json to make use of the latest packaged since other packages may still be using React.PropTypes and React.createClass – Hatbox

Also Do you try to reload the page when url changes to see if it loads – Hatbox

I did try reloading page, it does not change the view. It loads into the Users view even if the url is /#/details – Cantatrice

Can you try the updated answer with Route imported from 'react-router-dom` instead of react-router – Hatbox

If its not yet solved, bind your users component with withRouter, it has helped me solve the same issue before. Let me know. I have updated the code too. – Hatbox

I am having the same problem. My url changes but the view on the page only changes when i reload the page. @ShubhamKhatri can you help me with that? – Africa

We also need to confirm that the BrowserRouter is at the parent node in the index page. – Embosser

It seems that import {withRouter} from 'react-router' this no longer works with new package. This answer becomes even more confusing. – Annaleeannaliese

Answer 2

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.

Ozonolysis

I'm using create-react-app and this worked for me. Granted I built my router setup following some youtube tutorial, so create-react-app might not be related. – Rattigan

@DustinEnglish was it dennis ivy youtube tutorial? – Willman

this did the trick for me too – Bred

Answer 3

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)

Corina

< Route exact path="/mypath" component={withRouter(MyComponent)} /> worked for me – Cookgeneral

Answer 4

React Router v5 doesn't work with React 18 StrictMode https://github.com/remix-run/react-router/issues/7870

Resinoid

Oh, this is IT! Big thanks! Somebody mentions in the link you provided, that a temp solution can be moving React Strict mode inside BrowserRouter, because apparently "It is not working if BrowserRouter is a child of StrictMode" – Willman

Awesome! This worked for me after burning hours trying everything. – Succumb

It does, after a specific version fixed it. https://mcmap.net/q/152931/-link-tag-inside-browserrouter-changes-only-the-url-but-doesn-39-t-render-the-component – Zurek

Answer 5

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'))

Norwegian

Using the exact property would've also resolved this for you. – Pullman

Answer 6

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>

Astrometry

helping yourself made my day. I was trying it with two separated Routers. One was within the navbar and one within the body to accomodate the component. Now I put everything within the same Router in the parent component and things work as they should. – Abbeyabbi

Excellent - my exact issue. Thank you – Hipparch

Thanks! You saved me!! – Dogtrot

I have tried everything, including withRouter, but only this solution did worked ... a bit of explanation would be helpfull to understand why this is happening – Laden

@Laden I think react-router uses context API, and <Router /> aka <BrowserRouter /> provides a context to the route matchers like <Route />, <Switch /> and navigation components like <Link />, <Redirect />. In order to provide the same context, you have to wrap all children components within the context provider which is <Router />. – Astrometry

Answer 7

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

Millesimal

Answer 8

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.

Bringhurst

This worked for me in v5.3.1. Also v5.3.2 fixed this issiue. – Osteoma

After hours of debugging, this fixed my issue (which was due to v5.3.0). – Marlomarlon

Answer 9

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! :)

Placentation

no need to the exact attribute when you use Switch – Shaum

Answer 10

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))

Rhapsodic

But, it will work for functional component? – Granulocyte

Answer 11

In my case, I'd mistakenly nested two BrowserRouters.

Dremadremann

Answer 12

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'))

Protagoras

Answer 13

I Tried adding "exact" in front of the home path like this

<Route exact path="/" component={Home}></Route>

It is working fine...

Panel

Like, realy moving exact in front of to instead being it after helped. Want my hour of debugging back – Sprinkler

Answer 14

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)

Ambulant

Thanks. That fixed it for me. But it was just the component that contained Switch that I had to extend from Component instead of PureComponent in order for live view changing to work. – Cool

I've changed my pure component to component, it's not working for me though. – Aeroballistics

Answer 15

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.

Farleigh

Dude, you are a life saver. I was trying to figure out what's going on for over 2 hours and your solution worked like a charm. I was doing the exact mistake. Thank you ! – Dietrich

In my case, I was returning a cleanup function in useEffect function which was unmounting the whole component. But, during the refresh, it loaded, because, the id remained the same and useEffect function was no more called. – Dickinson

Answer 16

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'));
});

Corsetti

Answer 17

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
}

Mahout

This function componentWillReceiveProps is now deprecated – Eberly

Answer 18

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.

Unlay

Answer 19

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
    }
}

Sly

Answer 20

<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.

Barchan

Answer 21

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.

Wire

Answer 22

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.

Irresponsible

Answer 23

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.

Dithyrambic

Answer 24

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";

Shaum

Answer 25

In my case, switching to HashRouter instead of BrowserRouter solved my issue

Uranian

Switching to hashrouter just for this usecase is not a good approch, it wont have access to state, history or anything... you'll miss a lot rich functionalities, and all of your urls will end with with # symbols – Remembrance

Answer 26

I was accidentally using a BrowserRouter around my Link's.

<BrowserRouter>
    <div>
        <Link to="/" component={Users} />
        <Link to="/details" component={Details} />
    </div>
</BrowserRouter>

Yolondayon

Answer 27

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 [email protected]

Tranquil

Answer 28

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!

Lancey

Answer 29

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'))

Hofmannsthal

Define a Wrapper component which will render this.props.children. This will route properly. – Hofmannsthal

Answer 30

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)

Rowell

Answer 31

I would suggest that you check the User and Details components. They should not have a Router component in them. If you are using a <Link to=../> inside them which is inside a <Router> try removing the Router and only use the Link.

Fromm

Answer 32

If anyone is using the history package for navigation and if you are using the react-router v5, then you may have to downgrade the history package to 4.10.1 until the history package developers issue a new release with the fix. As of writing this, the latest release version of history package is v5.0.1, and if you see a new release than this, you can try with that version first to see if it works, before doing the downgrade to 4.10.1

Issue Link -> https://github.com/remix-run/history/issues/804

Holder

Answer 33

If you configure the router component like the above example and try to access history.push or props.history.push from any component, you may face the issue of not rendering the component while changing the URL. You can fix this by importing Router directly from react-router-dom instead of importing BrowserRouter as Router. You can find the corrected code below.

for e.g: import { Router, Switch, Route, } from "react-router-dom";

not: import { BrowserRouter as Router, Switch, Route, } from "react-router-dom";

Ziegfeld

Answer 34

Just came across this old questsion.

OP's <Switch> block is missing there on the quoted code. That should definitely stop things from working properly.

Kelleekelleher

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Revegetate

Answer 35

I just had a problem like this in react router v6 and it turns out that I was using nested routing without the <Outlet/> component so whenever I clicked a nested child route the URL changed but nothing happened?

this is all because I didn't tell it where to render the child component inside the parent and this is obviously done using the <Outlet/> component.

Ferrate

Answer 36

Just use a useEffect. Solution of react-router V6

import { useNavigate } from 'react-router-dom';
const history = useNavigate();

useEffect(() => {
if (logged) history('/', { replace: true });
}, [logged, history]);

Inexhaustible

Answer 37

An answer specifically for those having upgraded to react-router-dom version 6:

Uninstall the dependencies @types/react-router and @types/react-router-dom from your app's package.json. These packages do not go past version 5, because v6 provides its own type definitions. Keeping the old definitions around causes this problem.

This does of course assume your routing is otherwise correct. A simple, correct v6 routing setup might look like this:

import { BrowserRouter, Route, Routes } from 'react-router-dom'

<BrowserRouter>
    {/* other components, optionally */}

        <Routes>
            <Route path="/" element={<Dashboard />}></Route>
            <Route path="/users" element={<Users />}></Route>  
        </Routes>

    {/* other components, optionally */}
</BrowserRouter>

Bonus note: according to the official upgrade guide, you can also remove the history dependency as this is now a direct dependency of react-router-dom. If you happen to directly reference types from the history module in your app though, such as Location or LocationDescriptorObject, use npm install --save-dev @types/[email protected] to still have access to these types. Do not use the 5.0.0 version, as it is only a stub package with no content.

Higherup

Answer 38

The React-Router-DOM v5 routers inclusively render all matches, and "/" matches all routes, and so should be matched and rendered even when navigating to "/details".

However, since you are saying that only Users is rendered when the path is "/details" I suspect you have a Switch component involved. The Switch component exclusively matches routes, specifically it only renders the first matching Route or Redirect component. Sure, you can pass the exact prop for the "/" route so it's only matched when the URL path is exactly "/", but the more correct solution here is to order the routes correctly so there's no need to sprinkle the exact prop all over your routes.

Within the Switch component you should order the routes inversely by path specificity. In other words, more specific paths before less specific paths. The "/" route should be the last route specified since it's the least specific path other than the "*" wildcard "catch all". When ordered correctly there's virtually no need at all for the exact prop.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Users from "./components/Users";
import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <Switch>
      {/* more specific routes like "/details/all", "/details/:id", etc */}
      <Route path="/details" component={Details} />
      <Route path="/" component={Users} />
    </Switch>
  </BrowserRouter>
), document.getElementById('app'));

If you happen to have a "catch-all" route for anything that isn't matched, including the home page route, it would come last and you'd actually use exact on the home page route to differentiate it from the "catch-all".

Example:

<BrowserRouter>
  <Switch>
    <Route path="/details" component={Details} />
    <Route exact path="/" component={Users} />
    <Route path="*" component={NotFound} />
  </Switch>
</BrowserRouter>

Zurek