ルートに認証チェックを実装しようとしています。私のAppコンポーネントは私の親ルートであり、Appコンポーネント内で子をレンダリングしたいと思います。
問題：私の現在の設定では、ルーターはAppコンポーネントに接続されずAuthRoutes、'/auth'一致する場合は直接接続されません
目標：'/auth'一致する場合、最初にAppコンポーネントに渡され、そこで子をレンダリングすることを確認するにはどうすればよいですか？
Index.tsx
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Router />
</ConnectedRouter>
</Provider>,
document.getElementById("root")
);
Router.tsx
export default () => {
return (
<Switch>
<Route path={'/'} component={App}>
<Route path={'/auth'} component={AuthRoutes} />
<Route component={AuthContainer}>
<Route path={'/dashboard'} component={Dashboard} />
</Route>
</Route>
</Switch>
);
};
App.tsx
const App: React.FC = ({ children }: Props<Component>) => {
return (
<Layout className="layout">
<Nav theme={'light'} mode={'horizontal'} />
<Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
{children}
</Content>
</Layout>
);
}
export default App;
ここでは、最新バージョンのreact-router（v4）を使用していて、以前のバージョンと同じようにネストされたルートを実行しようとしているようです。
これを例に適用するには、次のものが必要です。
App.tsx
const App: React.FC = ({ children }: Props<Component>) => {
return (
<Layout className="layout">
<Nav theme={'light'} mode={'horizontal'} />
<Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
<Route path={'/auth'} component={AuthRoutes} />
<Route component={AuthContainer}>
<Route path={'/dashboard'} component={Dashboard} />
</Route>
</Content>
</Layout>
);
}
export default App;
Router.tsx
export default () => {
return (
<Switch>
<Route path={'/'} component={App} />
</Switch>
);
};
違いに気づきましたか？ネストされたルートはコンポーネント内に Appあり、その子ではありません。
ここで移行ドキュメントを参照できます：https：//github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md#nesting-routes
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加