React路由器总是呈现'/'路径

Question

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

react: ^16.2.0

react-dom: ^16.2.0

react-router-dom: ^4.2.2

当我尝试呈现 /#/account 时，它呈现 Home 而不是 Account。

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

解决这个问题的方法之一是使用<Switch>react-router-dom，您可以像这样导入它：

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>