在业务开发中，跳转前判断是否登录，未登录跳转到登录页面，登录就正常跳转是比较常见的场景。
参考代码如下:
const RequireAuth = ({children}) => {
const authed = ? //登录状态逻辑判断
return authed === true ? (children) : (<Navigate to='/' replace />);
}
class App extends React.Component{
render() {
return (
<Routes>
<Route path="/" element={<登录组件 />}></Route>
<Route path="/home" element={<RequireAuth><HomeSider /></RequireAuth>}>
<Route index element={<A组件 />}></Route>
<Route path="A" element={<A组件 />}></Route>
<Route path="B" element={<B组件 />}></Route>
<Route path="C" element={<C组件 />}></Route>
</Route>
<Route path="*" element={<NotFound />}/>
</Routes>
);
}
}
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
document.getElementById('root')
);
