文件目录
- 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;