原创

优雅的封装react路由


安装路由

cnpm install --save react-router
cnpm install --save react-router-dom

router.js

router.js配置和vue的路由相似

import Index from '../pages/Index'
import Home from '../pages/Home'
import User from '../pages/User'
import NotFond from '../pages/other/NotFond'
const router = [
  {
    path: '/index',//首页默认加载的页面
    componentName: Index,
    exact: false, //是否为严格模式 默认true。注意:本次封装对于有子路由的,exact一律设置为false(详见App.js匹配规则)
    routes: [
      {
        path: '/index/home',
        componentName: Home
      },
      {
        path: '/index/user',
        componentName: User
      }
    ]
  },
  {
    path: '/404',
    componentName: NotFond,
    exact: true
  },
];
export default router

特别注意这句话exact 是否为严格模式 默认true。注意:本次封装对于有子路由的,exact一律设置为false(详见App.js匹配规则)

App.js

import React from 'react';
import './App.css';
import { HashRouter as Router, Route } from "react-router-dom";
import router from './router/router'
function App() {
  return (
    <Router>
      <div className="App">
        {
          router.map(({path, componentName:ComponentName, exact = true, routes = []}, key) => {
            return <Route
              exact={routes.length !== 0 && exact}
              key={key}
              path={path}
              component={props => (<ComponentName {...props} routes={routes} />)}
            />
          })
        }
      </div>
    </Router>
  );
}
export default App;

注意:跟路由是导入

import router from './router/router'

其它一切子路由是取props的值拿routers

index.jsx

import React, { Component } from 'react';
import {HashRouter as Router, Route, Link } from "react-router-dom";
export default class Index extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    let {match, routes} = this.props;
    console.log(routes)
    return (
      <Router>
        <div className="content">
          <div className="left">
            <Link to='/user'>user</Link> <br/>
            <Link to='/home'>home</Link>
          </div>
          <div>
            {
              routes.map(({path, componentName:ComponentName, exact = true, routes = []}, key) => {
                return <Route
                  exact={routes.length !== 0 && exact}
                  key={key}
                  path={path}
                  component={props => (<ComponentName {...props} routes={routes} />)}
                />
              })
            }
          </div>
        </div>
  </Router>
    );
  }
}

Home.jsx

import React,{Component} from 'react'
export default class Home extends Component{
    constructor(props){
        super(props)
        this.state={
        }
    }
    render (){
        return (
            <div>
                Home
            </div>
        )
    }
}

User.jsx

import React,{Component} from 'react'
export default class User extends Component{
  constructor(props){
    super(props)
    this.state={
    }
  }
  render (){
    return (
      <div>
        User
      </div>
    )
  }
}

提示

可以将这段代码写成一个组件,以后用到子路由直接导入即可

<Router>
  {
    routes.map(({path, componentName: ComponentName, exact = true, routes = []}, key) => {
      return <Route
        exact={routes.length !== 0 && exact}
        key={key}
        path={path}
        component={props => (<ComponentName {...props} routes={routes}/>)}
      />
    })
  }
</Router>

router.js有坑

react:对于router嵌套问题,嵌套子路由,其父的exact一定要是false,不能让他严格匹配,否则子路由将不能显示(v4版本修改)

问题来了,设置false,同级的会匹配到显示出来 设置true,子级匹配不到,不能显示

解决:路由名称自己定义,按照指定格式命名即可

错误写法

import Index from '../pages/Index'
import Home from '../pages/Home'
import User from '../pages/User'
import NotFond from '../pages/other/NotFond'
const router = [
  {
    path: '/',//首页默认加载的页面
    componentName: Index,
    exact: false, //是否为严格模式 默认true。注意:本次封装对于有子路由的,exact一律设置为false(详见App.js匹配规则)
    routes: [
      {
        path: '/home',
        componentName: Home
      },
      {
        path: '/user',
        componentName: User
      }
    ]
  },
  {
    path: '/404',
    componentName: NotFond,
    exact: true
  },
];
export default router

以上写法,/会匹配所有,进入/路由,/404一样会被匹配到,其它同级都会被匹配到

组件
知识点
react
  • 作者:零三(联系作者)
  • 最后更新时间:2020-08-18 17:45
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn