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