Question

我正在尝试使用BrowserRouter路由多个页面。在线上的许多指南已经过时，不能与Reactv4一起使用。这是我在做什么：

Index.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>

React路由无法正常使用v4

1 个答案: