react-router-dom实现路由跳转拦截

在业务开发中，跳转前判断是否登录，未登录跳转到登录页面，登录就正常跳转是比较常见的场景。

参考代码如下:

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')
);