は、これらは私のアプリでは許可されたルートです許可ルートに

Question

を指定するには、どのようにルータV4

に反応しますユーザーに許可されるルートを指定しますか？

Answer 1

<Switch/>の成分は、pathでない成分を有する。

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

Answer 2

「ルートはユーザーに許可されていますか？」と言われています。これは、アプリケーションに認証レイヤーがあることを意味します。

は、あなたが持っているあなたの初期状態に言うことができます：

{ 
    user: undefined, 
    logged: false 
} 

あなたは何ができるか、のようなものを、このプロパティの状態を確認するためにルートを飾るです：

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 } 
      }} /> 
     ); 
    }} /> 
); 
}; 

あなたは可能性があり、今

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

次に、ベストソル状態の変化に反応することは、これを還元的に実行することになります。必要に応じてもっと黙らせることができます。