Question

我有以下react-router配置

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'

<BrowserRouter>
  <Route exact path='/sign-in' component={SignIn} />
  <Route exact path='/:username' component={Profile} />
</BrowserRouter>

在/dylan之类的个人资料页面上，个人资料组件匹配并且：用户名param是“dylan”，就像我期望的那样。

导航到/sign-in路线时，组件会被渲染，组件也会被渲染（用sign-in作为用户名）

使用react-router v4来阻止路由匹配多个组件的惯用解决方案是什么？

版本：

react-router-dom 4.1.2

Answer 1

@Battle_Slug是对的。实际上，区分路线/sign-in和/user/:username

会更好

但如果你真的需要它，你可以这样做

function CheckInitialParam(props) {
  if (props.match.params.intialParam === 'sign-in') {
     return <SignIn />
  } else {
     return <Profile />
  }
}
<BrowserRouter>
    <Route path="/:intialParam" component={CheckInitialParam} />
</BrowserRouter>

也正确使用<Switch>。

import React from 'react'
import { Switch, Route } from 'react-router-dom'

<BrowserRouter>
  <Switch>
    <Route exact path='/' component={Home} />
    <Route path='/sign-in' component={SignIn} />
    <Route path='/:username' component={Profile} />
  </Switch>
</BrowserRouter>

参考：https://reacttraining.com/react-router/web/api/Switch

反应路由器 - 不匹配多个路径（v4）

1 个答案: