Reagieren Router v4 wie erlaubt Routen zu spezifizieren

Question

Dies sind Routen in meiner app erlaubt:

/ 
/topic/development 
/topic/database 
/topic/security 
/pages/:page (:page can only be a number) 

ich Schwierigkeiten haben Not Found für die Benutzer anzuzeigen, wenn sie so etwas wie besuchen:

/topic/whatever 

Wo kann Ich gebe an, welche Routen für die Benutzer zulässig sind.

Answer 1

Innerhalb einer <Switch/> haben Sie eine Komponente ohne path.

<Switch> 
    <Route path="/" exact component={Home}/> 
    <Route path="/will-match" component={WillMatch}/> 
    ... More paths here 
    <Route component={NoMatch}/> 
    </Switch> 

Answer 2

Ich glaube, Sie sind zu erwähnen, „Routen sind für die Benutzer erlaubt?“, Was bedeutet, einige Schicht-Authentifizierung in Ihrer Anwendung ist.

Lets in Ihrem initial sagen, Sie haben:

{ 
    user: undefined, 
    logged: false 
} 

Was könnten Sie tun, ist die Strecke, um den Zustand der Immobilie zu überprüfen, so etwas wie dekorieren:

const renderMergedProps = (component, ...rest) => { 
    const finalProps = Object.assign({}, ...rest); 
    return (
    React.createElement(component, finalProps) 
); 
}; 

const PrivateRoute = ({ user, component, redirectTo, ...rest }) => { 
    return (
    <Route {...rest} render={routeProps => { 
     return user.logged ? (
     renderMergedProps(component, routeProps, rest) 
    ) : (
      <Redirect to={{ 
      pathname: redirectTo, 
      state: { from: routeProps.location } 
      }} /> 
     ); 
    }} /> 
); 
}; 

könnte Sie jetzt definieren Routen und privateroutes, die notwendigen Requisiten vorbei:

<Route exact path="/" render={() => (<Redirect to="/dashboard" />)} /> 
<PrivateRoute path="/dashboard" component={App} user={user} redirectTo="/login"/> 

Dann das beste Sol Um auf Zustandsänderungen zu reagieren, würde dies redu- ziert werden. Kann mehr bei Bedarf ausführen.