React router changes url but not view

by

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="https://stackoverflow.com/" 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

More Related Contents:

  1. How to push to History in React Router v4?
  2. How to pass params with history.push/Link/Redirect in react-router v4?
  3. How to get history on react-router v4?
  4. Detecting user leaving page with react-router
  5. How to pass params into link using React router v6?
  6. Component does not remount when route parameters change
  7. React.createElement: type is invalid — expected a string
  8. react-router-dom v6 useNavigate passing value to another component
  9. Why do I get the error “expressions must have one parent element”, how do I fix this?
  10. What is the best way to redirect a page using React Router? [closed]
  11. React Router Pass Param to Component
  12. How to stop /#/ in browser with react-router?
  13. react-router-dom useParams() inside class component
  14. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  15. How do you programmatically update query params in react-router?
  16. Invariant failed: You should not use outside a
  17. Using React-Router with a layout page or multiple components per page
  18. Target Active Link when the route is active in Next.js
  19. Use history.push in action creator with react-router-v4?
  20. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  21. Page layout broken in React Router v6
  22. react router v6 No routes matched location
  23. React App goes blank after importing React-Router-Dom
  24. Pass object through Link in react router
  25. React router and this.props.children – how to pass state to this.props.children
  26. using NavLink with external URL
  27. Children won’t render when using a layout in ReactJS
  28. How to go back to previous route in react-router-dom v6
  29. React Router Navigate pathing
  30. How to remove the hash from the url in react-router

Leave a Comment