reagieren Router - passen nicht mehrere Pfade (v4)

Question

ich folgende Voraussetzungen erfüllt sein reagieren-Router-Konfiguration

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> 

Wenn auf eine Profilseite wie /dylan die Profilkomponente Spiele und: username param ist „dylan“ wie Ich würde erwarten.

Wenn zur /sign-in Route navigiert wird, wird die Komponente gerendert und die Komponente erhalten gemacht (mit sign-in als Benutzername)

Was ist die idiomatische Lösung mit reagieren-Router v4 Routen zu verhindern, dass mehrere Komponenten passend?

Versionen:

• reagieren-Router-dom 4.1.2

Answer 1

@Battle_Slug richtig ist. Es ist eigentlich besser die Strecke /sign-in und /user/:username

zu unterscheiden Aber wenn Sie es wirklich brauchen, können Sie es auf diese Weise

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

Mit <Switch> auch richtig machen.

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> 

Referenz: https://reacttraining.com/react-router/web/api/Switch