1、结构目录
2、路由配置文件，参照的vue-router
config.js
import Login from '../view/Login.js';
import System from '../view/System.js';
import Bus from '../view/Bus.js';
import Bus22 from '../view/Bus22.js';
const routes = [
{
path: "/",
component: Login,
exact: true,
},
{
path: "/system",
component: System,
auth:true,
routes: [
{
path: "/system/bus",
component: Bus,
exact: true,
auth:true,
},
{
path: "/system/bus22",
component: Bus22,
exact: true,
auth:true,
},
]
}
];
export default routes;
3、路由主体，使用react-router-dom，详细文档里面也有其它的例子和API
import routes from './config';
import React, {Component} from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from "react-router-dom";
/*一级路由*/
class First extends Component {
render() {
return (
{routes.map((route, i) => {
if (route.auth) {//根据配置是否检测登录
return (
)
} else {
return ()
}
}
)}
);
}
}
/*二级路由*/
class SystemRouter extends Component {
render() {
return (
{routes[1].routes.map((route, i) => {
if (route.auth) {//根据配置是否检测登录
return (
)
} else {
return ()
}
})}
);
}
}
export {
First, SystemRouter
};
// A special wrapper for
that knows how to
// handle "sub"-routes by passing them in a `routes`
// prop to the component it renders.
/*开放路由*/
function RouteWithSubRoutes(route) {
return (
(
// pass the sub-routes down to keep nesting
)}
/>
);
}
/*登录检测路由*/
function PrivateRoute({children, ...rest}) {
let isAuthenticated = sessionStorage.auth;
return (
isAuthenticated ? (
children
) : (
)
}
/>
);
}
4、一级路由的使用，在App.js
import React from 'react';
import './App.css';
import {First} from './router/index';
function App() {
return (
);
}
export default App;
5、二级路由的使用，在一级路由的组件文件中，本例是System.js
import React,{Component} from 'react';
import {SystemRouter} from '../router/index';
import {
withRouter
} from "react-router-dom";
import { Menu, Icon } from 'antd';
const { SubMenu } = Menu;
class System extends Component {
componentDidMount() {
}
handleClick = e => {
this.props.history.push(e.key)
};
render() {
return (
);
}
}
export default withRouter(System);
最后来俩效果图，页面分三部分，头部、左侧导航、右侧内容，切换时只有右侧内容变化。
