React的嵌套子路由和导航首位

React导航首位

Route.js

import  { lazy } from 'react'
const App = lazy(() => import('./App'))
const Login = lazy(() => import('./view/login'))
const Home = lazy(() => import('./view/home'))
const Nofound = lazy(() => import('./view/nofound'))
const Detail = lazy(() => import('./view/detail'))
const Add = lazy(() => import('./view/add'))

const RouterConfig = [
    {
        path: "/",
        component: App,
        auth: false
    },
    {
        path: "/login",
        component: Login,
        auth: false
    },
    {
        path: "/home",
        component: Home,
        auth: true
    },
    {
        path: "/detail",
        component: Detail,
        auth: false,

    },
    {
        path: "/404",
        component: Nofound,
        auth: false
    },

];

export default RouterConfig;

信息判断 FrontendAuth.js

import React from "react";
import { Route, Redirect } from "react-router-dom";

// config
import RouterConfig from "./router";

class FrontendAuth extends React.Component {
  render() {
    const pathname = this.props.location.pathname;
    const targetRouter = RouterConfig.find(function (item) {
      return item.path === pathname;
    });
    const isLogin = JSON.parse(sessionStorage.getItem("loginStatus"));

    if (pathname === "/") {
      return <Redirect to="/login"></Redirect>;
    }

    if (!targetRouter) {
      return <Redirect to="404" />;
    }
    // if (!isLogin) {
    //   return (
    //     <Route exact path={pathname} component={targetRouter.component} />
    //   );
    // }
    if (isLogin) {
      if (pathname === "/login") {
        return <Redirect to="/home"></Redirect>;
      } else {
        return (
          <Route exact path={pathname} component={targetRouter.component} />
        );
      }
    } else {
      if (targetRouter.auth) {
        console.log("请先登录");
        return <Redirect exact to="/login" />;
      } else {
        return (
          <Route exact path={pathname} component={targetRouter.component} />
        );
      }
    }
  }
}

export default FrontendAuth;

index.js

import ReactDOM from 'react-dom/client';
import React, { Suspense, lazy } from 'react'
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Switch } from "react-router-dom";
// 你的高阶组件
import FrontendAuth from './FrontendAuth'
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <div>
    <BrowserRouter >
      <Suspense fallback={<div>null</div>}>
        <Switch>
          <FrontendAuth />
        </Switch>
      </Suspense>
    </BrowserRouter>
  </div>


);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

以上代码直接复制就可以实现React的导航首位了

React嵌套子路由

Router.js

import { Route, BrowserRouter, Switch } from 'react-router-dom'
import React, { Suspense, lazy } from 'react'
// import Pagehome from './App' 
const Pagehome = lazy(() => import('./App'))
const Home = lazy(() => import('./view/Home'))
const Login = lazy(() => import('./view/login.js'))
class Router extends React.Component {
    render() {
        return (
            <BrowserRouter>
                {/* exact 是精确路由 */}
                <Suspense fallback={<div>null</div>}>
                    <Switch>
                        <Route strict exact path="/" component={Pagehome}></Route>
                        {/* <Route strict exact path="/home" component={Home}></Route> */}
                        <Route strict path='/login' render={() =>
                            <Login>
                                <Route path="/login/home" component={Home}></Route>
                            </Login>
                        } />
                        {/* <Route exact strict path='*' component={Pagehome}></Route> */}
                    </Switch>
                </Suspense>
            </BrowserRouter>
        )
    }
} export default Router

 Login.js  (props.children)就是嵌套子路由页面

function Login(props) {
    console.log(props.children)
    return (
        <div>
            Login
            {props.children}
        </div>
    )
}
export default Login

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import Router from './router'
import 'antd/dist/antd.min.css'


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>
        <Router></Router>
    </div>

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

嵌套子路由+导航守卫

1、router.js

import  {lazy } from 'react'
// import Pagehome from './App' 
const Pagehome = lazy(() => import('./App'))
const Home = lazy(() => import('./view/Home'))
const Login = lazy(() => import('./view/login.js'))
const Lianxi = lazy(() => import('./view/lianxi'))
const Nofond = lazy(() => import('./view/404'))
const routes = [
    {
        path: '/login',
        exact: true,
        component: Login
    },
    {
        path: '/page',
        component: Pagehome,
        children: [
            {
                path: '/page/home',
                exact: true,
                login: true,//如果为true则需要登录
                component: Home
            },
            {
                path: '/page/lianxi',
                exact: true,
                login: true,
                component: Lianxi
            },
        ]
    },

    {
        path: '/404',
        exact: true,
        component: Nofond
    },
]
export default routes

2、RenderRouter.js

import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
import routes from './router'


function RenderRoutes() {
  let token = true //模拟登录
  return (
    <>
      <BrowserRouter>
        <Suspense fallback={<div>null</div>}>
          <Switch>
            {
              routes.map((route, index) => (
                <Route
                  key={index}
                  path={route.path}
                  exact={route.exact}
                  render={(props) => { // 利用render 方法处理
                    if (!route.login) {
                      if (route.children) {
                        return (
                          <div>
                            <route.component props={props}></route.component>
                            <Switch>
                              {
                                route.children.map((child, i) => (
                                  <Route
                                    key={i}
                                    path={child.path}
                                    exact={child.exact}
                                    component={child.component}
                                  />
                                ))
                              }
                              <Redirect to={'/404'}></Redirect>

                            </Switch>
                          </div>
                        )
                      } else {
                        return (
                          <route.component props={props}></route.component>
                        )
                      }
                    } else {
                      if (token) {
                        if (route.children) {
                          return (
                            <div>
                              <route.component props={props}></route.component>
                              <Switch>
                                {
                                  route.children.map((child, i) => (
                                    <Route
                                      key={i}
                                      path={child.path}
                                      exact={child.exact}
                                      component={child.component}
                                    />
                                  ))
                                }
                                <Redirect to={'/404'}></Redirect>
                              </Switch>
                            </div>
                          )
                        } else {
                          return (
                            <route.component props={props}></route.component>
                          )
                        }
                      } else {
                        return (
                          <Redirect to='/login'></Redirect>
                        )
                      }
                    }

                  }}
                />
              ))
            }
            <Redirect to='/404'></Redirect>

          </Switch>
        </Suspense>
      </BrowserRouter>

    </>
  )
}

export default RenderRoutes

3、index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import RenderRoutes from './RenderRoutes'
import 'antd/dist/antd.min.css'


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>
        <RenderRoutes></RenderRoutes>
    </div>

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();