javascript - React 路由不工作 v4

Question

我正在尝试使用 BrowserRouter 路由多个页面。许多在线指南已经过时，并且不适用于 Reactv4。这就是我正在做的事情:

索引.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import SignIn from './components/SignIn';
import SignUp from './components/SignUp';
import ForgotPass from './components/ForgotPass';

ReactDOM.render((<BrowserRouter>
  <Switch>
    <Route path="/" component={SignIn}/>
    <Route path="/signup" component={SignUp}/>
    <Route path="/forgot" component={ForgotPass}/>
  </Switch>
</BrowserRouter>), document.getElementById('root'));

然后我使用以下方法创建指向这些页面的超链接:

<a href="/forgot">Forgot password?</a>

但是当我单击超链接时，它只会再次加载同一页面。

另外:我看到一些指南使用了 App 组件，我不确定这是否是 React 中预定义的东西以及是否需要它，因为我需要 SignIn 组件作为默认页面。

Answer 1

将精确的平面放在您的根路径上。否则，它将在到达较低路由之前在交换机中进行匹配。

 <Switch>
    <Route exact path="/" component={SignIn}/>
    <Route path="/signup" component={SignUp}/>
    <Route path="/forgot" component={ForgotPass}/>
 </Switch>

或者将其移至末尾:

<Switch>
    <Route path="/signup" component={SignUp}/>
    <Route path="/forgot" component={ForgotPass}/>
    <Route path="/" component={SignIn}/>
 </Switch>