反應路由器 - 不匹配的多條路徑（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