React JS Switch Routerがadminページのみ404ページを表示しない

Question

私のアプリの一部をログインユーザーに限定したいと思っています。 私は以下のコードを使用してこれを動作させています。

しかし、以前は一致するルートが見つからない場合にスイッチスイッチを使用して404ページにユーザーを送信していました。私はApp.jsxユーザーにEnsureLoggedInコンポーネントを追加するため、いくつかの理由

は、404ページにリダイレクトされることはありません。

テスト：URLにランダムパスを入力してください。 404ページにルーティングする必要があります。

• isLoggedIn =偽：ユーザーは、/ログインページにリダイレクトされます。
• isLoggedIn = true：一致するルートが見つからず、ページコンテナが空にレンダリングされます。

私は少しとの誰かがより多くの経験は、この上で私を操縦することができますリアクト願って404

をレンダリングし、その後、スイッチルータは、ルートの試合のいずれもいるのでEnsureLoggedIn内にネストされているものを無視することを期待したいです。しかし、あなたの<EnsureLoggedIn>コンポーネントはとにかくレンダリングされると、明示的で<Switch>排他性を回避 -

App.jsx

<BrowserRouter> 
    <Header/> 
    <Switch> 
    <Route exact path="/" component={HomePage}/> 
    <Route exact path="/someotherpage" component={SomeOtherPage}/> 
    <EnsureLoggedIn> 
    <Route exact path="/dashboard" component={Dashboard}/> 
    </EnsureLoggedIn> 
    <Route component={Error404Page}/> 
    </Switch> 
    <Footer/> 
</BrowserRouter> 

EnsureLoggedIn.jsx

class EnsureLoggedIn extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {isLoggedIn: false}; 
    } 

    render() { 
    const isLoggedIn = this.state.isLoggedIn; 
    if (isLoggedIn) { 
     return this.props.children 
    } else { 
     return (<Redirect to="/login" />); 
    } 
    } 
} 

Answer 1

<Switch>は、最初に一致した子<Route>をレンダリングその子をレンダリングします。この種の階層がサポートされているかどうかはわかりません。

<LoggedInEnsuringDashboard>などを入れて入れ子なしでRouterにまっすぐ入れることを検討してください。

編集：の線に沿って

何か：

<BrowserRouter> 
    <Header/> 
    <Switch> 
    <Route exact path="/" component={HomePage}/> 
    <Route exact path="/someotherpage" component={SomeOtherPage}/> 
    <Route exact path="/dashboard" component={LoggedInEnsuringDashboard}/> 
    <Route component={Error404Page}/> 
    </Switch> 
    <Footer/> 
</BrowserRouter> 

そして

class LoggedInEnsuringDashboard extends Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    if (this.props.isLoggedIn) { 
     return <Dashboard> 
    } else { 
     return <Redirect to="/login" /> 
    } 
    } 
} 

Answer 2

ちょうど私が使用して終了し、別のアプローチを提供します。

これには、すべての管理専用ページがサブコンテナとしてリストされているUserAreaというコンテナの作成が含まれます。

次に、ユーザーがログインしていなければ、/ user-areaで始まるURLがログインページにリダイレクトされるように、render関数で次のようにします。

this.isLoggedIn() ? (<UserArea />) : (<Redirect to="/login" />)) 

App.jsx

<BrowserRouter> 
    <Header/> 
    <Switch> 
    <Route exact path="/" component={HomePage}/> 
    <Route exact path="/someotherpage" component={SomeOtherPage}/> 
    <Route exact path="/login" component={LoginPage}/> 
    <Route path="/user-area" render={()=>(this.isLoggedIn() ? (<UserArea />) : (<Redirect to="/login" />))} /> 
    <Route component={Error404Page}/> 
    </Switch> 
    <Footer/> 
</BrowserRouter> 

UserArea.jsx

<BrowserRouter> 
    <main className="ks-main-content ks-container__user-area"> 
    <UserAreaHeader /> 
     <Switch> 
     <Route exact path="/user-area/dashboard" component={UserAreaDashboardPage}/> 
     <Route exact path="/user-area/profile" component={UserAreaProfile}/> 
     <Route component={Error404Page} /> 
    </Switch> 
    </main> 
</BrowserRouter>