条件路由未呈现重定向的布局

问题描述

在const todoSchema = new mongoose.Schema({ text: { type: String,required: true },done: { type: Boolean,default: false } }); const Todo = mongoose.model('Todo',todoSchema); 中，我有一条条件路由，其中​​包含AppRouter的重定向。

相关代码段：

<AdminLayout/>

如果<Route exact path="/admin" strict render={(props) => <AdminLayout {...props} />} > {loggedIn ? <Redirect to="/admin/summary" /> : <Login />} </Route> 为true，则重定向到loggedIn，否则将其重定向回到/admin/summary

问题是：它仅更改URL而没有呈现<Login/>。

不确定我要去哪里以及我缺少什么。

下面更新了PrivateRoute和AppRouter

<AdminLayout/>

AppRouter

import React,{ useEffect } from "react"; import { Router,Route,Switch,Redirect } from "react-router-dom"; import { usedispatch,useSelector } from "react-redux"; import { createbrowserHistory } from "history"; import { alertActions } from "../actions"; import { history } from "../helpers"; import AdminLayout from "layouts/Admin/Admin.js"; import AuthLayout from "layouts/Auth/Auth.js"; import ResetPassword from "../components/pages/reset-password/ResetPassword"; import MailReset from "../components/pages/reset-password/MailReset"; import PrivateRoute from "../routes/PrivateRoute"; import Dashboard from "views/Dashboard"; const hist = createbrowserHistory(); const AppRouter = () => { const alert = useSelector((state) => state.alert); const dispatch = usedispatch(); useEffect(() => { history.listen((location,action) => { // clear alert on location change dispatch(alertActions.clear()); }); },[]); return ( <Router history={hist}> <Switch> {/* <Route path="/admin" render={(props) => <AdminLayout {...props} />} /> */} <PrivateRoute exact path="/admin"> <Dashboard /> </PrivateRoute> <Route path="/auth/login" render={(props) => <AuthLayout {...props} />} /> <Route exact path="/auth/forgotPassword" component={ResetPassword} /> <Route exact path="/auth/mail_reset" component={MailReset} /> <Redirect from="*" to="/auth/login" /> </Switch> </Router> ); }; export default AppRouter;

PrivateRoute

解决方法

因此尝试解释其错误所在：

1. 您正在设置渲染child和render props，这就是children道具在这里优先的原因

<Route
          exact
          path="/admin"
          render={(props) => <AdminLayout {...props} />}
        >
          {loggedIn ? <Redirect to="/admin/summary" /> : <Login />}
        </Route>

1. 您的私人路线是正确的，但还需要添加布局：

return <AdminLayout {...props} /><Component {...props} /></AdminLayout/>;

1. 在应用程序内部路线中，您需要导入PrivateRoute组件，它看起来像这样：

import PrivateRoute from './PrivateRoute';

const AppRouter = () => {
  const alert = useSelector((state) => state.alert);
  const loggedIn = useSelector((state) => state.authentication.loggedIn);

  const dispatch = useDispatch();

  useEffect(() => {
    history.listen((location,action) => {
      // clear alert on location change
      dispatch(alertActions.clear());
    });
  },[]);

  return (
    <Router history={hist}>
      <Switch>
        <PrivateRoute exact path='/admin'>
          <YOUR AUTH COMPONENT WHICH YOU WANT TO RENDER />
        </PrivateRoute>
        <Route
          path='/auth/login'
          render={(props) => <AuthLayout {...props} />}
        />
        <Route exact path='/auth/forgotPassword' component={ResetPassword} />
        <Route exact path='/auth/mail_reset' component={MailReset} />
        <Redirect from='*' to='/auth/login' />
      </Switch>
    </Router>
  );
};

        

在这里我创建了演示代码。从中引用：https://codesandbox.io/s/react-router-redirects-auth-forked-6q6o4?file=/example.js