react嵌套路由

篮羽公爵 發表於 2020-4-16 11:15:00

<h2>1、结构目录</h2>
<img src="https://img2020.cnblogs.com/blog/1187630/202004/1187630-20200416105449904-810580890.png" alt="">
<h2>2、路由配置文件，参照的vue-router</h2>
config.js
<div class="cnblogs_code">
<pre>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;</pre>
</div>
<h2>3、路由主体，使用react-router-dom，详细文档里面也有其它的例子和API</h2>
<div class="cnblogs_code">
<pre>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 (
 <Router>
 <Switch>
 {routes.map((route, i) => {
 if (route.auth) {//根据配置是否检测登录
 return (
 <PrivateRoute key={i} path={route.path}>
 <route.component/>
 </PrivateRoute>
 )
 } else {
 return (<RouteWithSubRoutes key={i} {...route} />)
 }
 }
 )}
 </Switch>
 </Router>
 );
}
}
/*二级路由*/
class SystemRouter extends Component {
render() {
return (
 <Switch>
 {routes[1].routes.map((route, i) => {
 if (route.auth) {//根据配置是否检测登录
 return (
 <PrivateRoutekey={i} path={route.path}>
 <route.component/>
 </PrivateRoute>
 )
 } else {
 return (<RouteWithSubRoutes key={i} {...route} />)
 }
 })}
 </Switch>
 );
}
}

export {
First, SystemRouter
};
// A special wrapper for <Route> that knows how to
// handle "sub"-routes by passing them in a `routes`
// prop to the component it renders.
/*开放路由*/
function RouteWithSubRoutes(route) {
return (
<Route
 exact={route.exact}
 path={route.path}
 render={props => (
 // pass the sub-routes down to keep nesting
 <route.component {...props} routes={route.routes}/>
 )}
/>
);
}
/*登录检测路由*/
function PrivateRoute({children, ...rest}) {
let isAuthenticated = sessionStorage.auth;
return (
<Route
 {...rest}
 render={({location}) =>
 isAuthenticated ? (
 children
 ) : (
 <Redirect
 to={{
 pathname: "/",
 state: {from: location}
 }}
 />
 )
 }
/>
);
}</pre>
</div>
<h2>4、一级路由的使用，在App.js</h2>
<div class="cnblogs_code">
<pre>import React from 'react';
import './App.css';
import {First} from './router/index';

function App() {
return (
<First/>
);
}

export default App;</pre>
</div>
<h2>5、二级路由的使用，在一级路由的组件文件中，本例是System.js</h2>
<div class="cnblogs_code">
<pre>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 (
 <div>
 <header>
 嵌套路由
 </header>
 <Menu
 onClick={this.handleClick}
 style={{ width: 256,float:'left' }}
 defaultSelectedKeys={['1']}
 defaultOpenKeys={['sub1']}
 mode="inline"
 >
 <SubMenu
 key="sub1"
 title={
 
 <Icon type="mail" />
 Navigation One
 
 }
 >
 <Menu.Item key="/system/bus">bus</Menu.Item>
 <Menu.Item key="/system/bus22">bus22</Menu.Item>
 </SubMenu>

 </Menu>
 <SystemRouterstyle={{ float:'left' }}/>
 </div>
 );
}
}
export default withRouter(System);</pre>
</div>
最后来俩效果图，页面分三部分，头部、左侧导航、右侧内容，切换时只有右侧内容变化。
<img src="https://img2020.cnblogs.com/blog/1187630/202004/1187630-20200416111146138-1164787857.png" alt="">
 
<img src="https://img2020.cnblogs.com/blog/1187630/202004/1187630-20200416111332378-427132102.png" alt="">
 
 
<img src="https://img2020.cnblogs.com/blog/1187630/202004/1187630-20200416111347177-1087516413.png" alt="">
  
来源：https://www.cnblogs.com/gxp69/p/12711412.html

頁: [1]

琼殿技术论坛's Archiver

react嵌套路由