React+Router多級導航切換路由方式

更新時間：2024年03月14日 10:17:26 作者：那等雨停吧

這篇文章主要介紹了React+Router多級導航切換路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

背景

我們需要開發(fā)一個管理平臺，登陸、注冊及網(wǎng)站首頁等不需要加載用戶信息的頁面放置在系統(tǒng)外部

系統(tǒng)內(nèi)部則是需要驗證用戶身份及其角色的頁面。

文件結構

注：輸出文件樹及文件 tree ./src /F

│  index.html 頁面文件入口
│  index.js js文件入口
│  style.scss
├─actions
│      api.js
│      base.js
├─containers
│  │  contentMain.jsx 填充layout中的content部分
│  │  layout.jsx 系統(tǒng)頁面中的布局，包含菜單導航
│  │  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組件中，對路由繼續(xù)匹配

# 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>企業(yè)客戶</span>
                </span>
              }
            >
              <Menu.Item key="table"><Link to={'/main/firms/table'}>企業(yè)客戶表</Link></Menu.Item>
              <Menu.Item key="new"><Link to={'/main/firms/new'}>添加企業(yè)客戶</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