反应路由器 - 不匹配的多条路径（V4）

Question

我有以下反应-路由器配置

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简档页面的资料组件匹配和：用户名参数是“迪伦”像我会期待的。

当浏览到/sign-in路线，该组件被渲染和组件获得渲染过（与sign-in作为用户名）

什么是反应路由器V4惯用的解决方案，以防止匹配多个组件路线？

版本：

• 反应路由器-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