React路由器始终呈现'/'路径

Question

我正在尝试使用v4 react路由器，但路由器始终呈现初始路径（'/'）。 我使用

react: ^16.2.0

react-dom: ^16.2.0

react-router-dom: ^4.2.2

当我试图渲染/＃/帐户，它呈现的，而不是账户主页。

import React from "react" 
 
import ReactDOM from "react-dom" 
 
import { BrowserRouter as Router, Route } from 'react-router-dom' 
 

 
import Home from "./components/Home/Home"; 
 
import Account from "./components/Account/Account"; 
 
import Layout from "./components/Layout"; 
 

 
const app = document.getElementById('app'); 
 

 
ReactDOM.render(
 
    <Router> 
 
     <div> 
 
     <Route exact path="/" render={() => (<div>Home</div>)} /> 
 
     <Route path="/account" render={() => (<div>Account</div>)} /> 
 
     </div> 
 
    </Router>, 
 
    app 
 
)

Answer 1

其中之一来解决这个问题的办法是让从反应路由器-DOM使用<Switch>，您可以导入它想：

import {Switch} from 'react-router-dom'; 

，然后包裹你的<Route><Switch>我认为它是一个好主意，把"/"在最后，并给予默认组件，如：

<Router> 
     <div> 
     <Switch> 
      <Route path="/account" render={() => (<div>Account</div>)} /> 
      <Route exact path="/" render={() => (<div>Home</div>)} /> 
      <Route component={NoMatch}/> 
     </Switch> 
    </div> 
    </Router> 

你可以阅读更多关于<Switch>Here