React+Router多级导航切换路由方式
作者：那等雨停吧
这篇文章主要介绍了React+Router多级导航切换路由方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
背景
我们需要开发一个管理平台，登陆、注册及网站首页等不需要加载用户信息的页面放置在系统外部
系统内部则是需要验证用户身份及其角色的页面。
文件结构
注：输出文件树及文件 tree ./src /F
│ index.html 页面文件入口 │ index.js js文件入口 │ style.scss ├─actions │ api.js │ base.js ├─containers │ │ contentMain.jsx 填充layout中的content部分 │ │ layout.jsx 系统页面中的布局，包含菜单导航 │ │ noPage.jsx 页面走丢 │ │ personal.jsx │ │ style.scss │ ├─account │ │ new.jsx │ │ table.jsx │ ├─clients │ │ new.jsx │ │ table.jsx │ ├─firms │ │ new.jsx │ │ table.jsx │ ├─index │ │ index.jsx │ │ items.jsx │ │ style.scss │ ├─login │ │ index.jsx │ │ style.scss │ └─resetpassword │ index.jsx │ style.scss └─ xxxxx···
最外层路由
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
const IndexPage = require('./containers/index/index').default;
const Layout = require('./containers/layout').default;
const Login = require('./containers/login').default;
const RestPassWord = require('./containers/resetpassword').default;
const NotFoundPage = require('./containers/noPage').default;
import configureStore from './store';
import './style.scss'
const store = configureStore();
render(
<Provider store={store}>
<Router>
<Switch>
<Route path="/main" component={Layout} /> //模糊匹配，只要路由中有/main就会加载Layout组件
<Route exact path="/index" component={IndexPage} /> // 精确匹配
<Route exact path="/login" component={Login} />
<Route exact path="/reset" component={RestPassWord} />
<Route component={NotFoundPage} />
</Switch>
</Router>
</Provider>, document.getElementById('root')
);
二级路由
在Layout组件中，对路由继续匹配
# Layout
import React, { Component } from 'react';
import { Layout, Menu, Avatar, Icon , Dropdown} from 'antd';
import {Link} from 'react-router-dom';
import ContentMain from './contentMain';
import { createHashHistory } from 'history';
import './style.scss';
const history = createHashHistory();
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
export default class LayoutPagae extends Component {
state = {
collapsed: false,
user: 'Liz',
};
onCollapse = collapsed => {
console.log(collapsed);
this.setState({ collapsed });
};
handleLoginOut = e => {
e.preventDefault();
history.push('/login');
};
render() {
const menu = (
<Menu>
<Menu.Item>
<Link to={'/main/personal'}>个人中心</Link>
</Menu.Item>
<Menu.Item>
<div onClick={this.handleLoginOut}>退出</div>
</Menu.Item>
</Menu>
);
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
<div className="logo"> CRM </div>
<Menu theme="dark" defaultSelectedKeys={['person']} defaultOpenKeys={['table']} mode="inline">
<SubMenu
key="person"
title={
<span>
<Icon type="user" />
<span>个人客户</span>
</span>
}
>
<Menu.Item key="table"><Link to={'/main/client/table'}>个人客户表</Link></Menu.Item>
<Menu.Item key="new"><Link to={'/main/client/new'}>添加个人客户</Link></Menu.Item>
</SubMenu>
<SubMenu
key="firms"
title={
<span>
<Icon type="team" />
<span>企业客户</span>
</span>
}
>
<Menu.Item key="table"><Link to={'/main/firms/table'}>企业客户表</Link></Menu.Item>
<Menu.Item key="new"><Link to={'/main/firms/new'}>添加企业客户</Link></Menu.Item>
</SubMenu>
<SubMenu
key="account"
title={
<span>
<Icon type="area-chart" />
<span>绩效汇总</span>
</span>
}
>
<Menu.Item key="table"><Link to={'/main/account/table'}>绩效汇总表</Link></Menu.Item>
<Menu.Item key="new"><Link to={'/main/account/new'}>添加新成交</Link></Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header>
<Dropdown overlay={menu}>
<Avatar style={{ backgroundColor: '#f56a00', verticalAlign: 'middle' }} size="large">
{this.state.user}
</Avatar>
</Dropdown>
</Header>
<Content style={{ margin: '0 16px' }}>
<ContentMain />
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
);
}
}
contentMain组件
import React from 'react';
import {HashRouter as Router,Route, Switch} from 'react-router-dom';
import ClientsTable from './clients/table';
import ClientsNew from './clients/new';
import FirmsTable from './firms/table';
import FirmsNew from './firms/new';
import AccountTable from './account/table';
import AccountNew from './account/new';
import Personal from './personal';
class ContentMain extends React.Component {
render() {
return (
<div>
<Router>
<Switch>
<Route exact path='/main/client/table' component={ClientsTable}/> //全部都精确匹配
<Route exact path='/main/client/new' component={ClientsNew}/>
<Route exact path='/main/firms/table' component={FirmsTable}/>
<Route exact path='/main/firms/new' component={FirmsNew}/>
<Route exact path='/main/account/table' component={AccountTable}/>
<Route exact path='/main/account/new' component={AccountNew}/>
<Route exact path='/main/personal' component={Personal}/>
</Switch>
</Router>
</div>
)
}
}
export default ContentMain
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。