react-router5路由封装

文件目录

- src
	- pages
		About.jsx
		fail.jsx
		Home.jsx
		Home1.jsx
		Home2.jsx
	- router
		index.jsx
		routes.jsx
	- App.jsx

src/router/routes.jsx

import React, { lazy } from 'react';

const Home = lazy(() => import('../pages/Home'));
const HomeA = lazy(() => import('../pages/Home1'));
const HomeB = lazy(() => import('../pages/Home2'));
const About = lazy(() => import('../pages/About'));
const Fail = lazy(() => import('../pages/fail'));

const routes = [
  {
    path: '/',
    redirect: '/about',
    exact: true,
  },
  {
    path: '/about',
    component: About,
    exact: false,
  },
  {
    path: '/home',
    component: Home,
    exact: false,
    children: [
      {
        path: '/home/home1',
        component: HomeA,
        exact: true,
      },
      {
        path: '/home/home2',
        component: HomeB,
        exact: true,
      },
      {
        path: '/home',
        redirect: '/home/home1',
        exact: true,
      },
    ],
  },
  // 找不到路径的时候 进行匹配
  {
    path: '*',
    component: Fail,
    exact: false,
  },
];

export default routes;

src/router/index.jsx

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

function RouterView(props) {
  return (
    <Suspense fallback={<h1>loading...</h1>}>
      <Switch>
        {props.routes.map((item, index) => {
          return (
            <Route
              key={index}
              path={item.path}
              exact={item.exact}
              render={(props) =>
                item.redirect ? (
                  <Redirect push to={item.redirect} from={item.path} />
                ) : (
                  <item.component {...props} routes={item.children} />
                )
              }
            />
          );
        })}
      </Switch>
    </Suspense>
  );
}
export default RouterView;

src/App.jsx

import {BrowserRouter, NavLink} from "react-router-dom"
import RouterView from './router/index';
import routes from './router/routes';

export default () => {
  return (
    <div className='app-route'>
      <BrowserRouter>
        {/* 页面导航 */}
        <ul>
          <li> <NavLink to="/" exact>about</NavLink> </li>
          <li> <NavLink to="/home" exact>home</NavLink> </li>       
        </ul>
        <RouterView routes={routes}  />
      </BrowserRouter>
    </div>
  );
};

src/pages/Home.jsx

import React from 'react';
import { NavLink} from 'react-router-dom';
import RouterView from '../router/index';

export default (props) => {
  return (
    <div>
      <li> <NavLink to='/home/home1'>home11111</NavLink> </li>
      <li> <NavLink to='/home/home2'>home22222</NavLink> </li>
      <RouterView routes={props.routes} />
    </div>
  );
};

src/pages/Home1.jsx

export default (props) => {
  return <div>Home1</div>;
};

src/pages/Home2.jsx

export default (props) => {
  return <div>Home2</div>;
};

src/pages/About.jsx

import React from 'react';
const About = () => {
  return <div> about </div>;
};
export default About;