は、ルータを反応させる - 複数のパスに一致しない（V4）

Question

/dylanなどのプロフィールページにプロフィールコンポーネントが一致したとき、私は次のように反応-ルータを設定

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> 

を持っている：ユーザー名paramはのような「ディラン」であります私は期待しています。

/sign-in経路に移動するとき、成分がレンダリングされると成分（ユーザ名としてsign-inで）あまりにもレンダリングされ得る

複数のコンポーネントに合致するからルートを防止するために反応するルータをV4との慣用的解決策は何ですか？

バージョン：

• が反応し、ルータ-DOM 4.1.2

Answer 1

@Battle_Slugは正しいです。これは、ルート/sign-inと/user/:username

を区別するために、実際に良いでしょう。しかし、あなたが本当にそれを必要とする場合は、この方法でも<Switch>権利を使用して

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

それを行うことができます。

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