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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…