首页 文章

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

提问于
浏览 次
1

我有以下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 这样的 Profiles 页面上，配置文件组件匹配并且：用户名参数是"dylan"，就像我期望的那样 .

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

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

版本：

  • react-router-dom 4.1.2
reactjs react-router-v4

1 回答

  • 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

    回复于

相关问题