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

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

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

然后将你的qazxsw poi包装在qazxsw poi中我觉得将<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>

的内容

Answer 2

使用<Switch>的另一种方法是Here，它使用URL的哈希部分（即window.location.hash）来保持UI与URL同步。

见：<BrowserRouter>

因此，在您的示例中，您只需导入<HashRouter>

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md