封装react路由

思路

类似vue中的路由配置 整个都由路由表操作 更改路由表即可添加对应的路由配置

开始

安装 npm install react-router-dom -S

封装

分俩个文件 分别是路由表 和 路由组件的封装

路由表

负责引入组件和导出对应的路由信息

路由表中的参数可以自行定义

import About from '../pages/about';
import Home from '../pages/home';
import Profile from '../pages/profile';
import News from '../pages/news';

export default [
  {
    path:'/home',
    component: Home
  },
  {
    path:'/about',
    component: About,
    children:[
      {
        path:'/about/news',
        component:News,
      }
    ]
  },
  {
    path:'/profile',
    component: Profile
  },
  {
    from:'/',
    redirect:'/home',
    exact:true
  }
]

封装路由组件

封装路由

import React, { Component } from 'react';
import {
  Switch,
  Route,
  Redirect
} from 'react-router-dom';

class index extends Component {
  render() {
    let { routes } = this.props;
    return (
      <Switch>
        {
          routes.map((item, index) => {
            if(item.redirect) {//判断是否重定向
              return (
                <Redirect from={item.from} to={item.redirect} exact={item.exact} key={index}></Redirect>
              )
            }
            return (//props中包含了操控路由的对象
              <Route path={item.path} key={index} component={(props) => {
                return (//组件传递一些数据可以写成这样
                  <item.component {...props} routes={item.children}></item.component>
                )
              }}></Route>
            )
          })
        }
      </Switch>
    );
  }
}

export default index;

使用

在使用时引入路由表 和封装好的组件这样使用即可

<RouterView *routes*={config}></RouterView>

import React, { Component } from 'react';
import {
  BrowserRouter,
  Link,
} from 'react-router-dom';
import {RouterView} from '../components';
import config from './config';

class index extends Component {
  render() {
    return (
      <BrowserRouter>
        <RouterView routes={config}></RouterView>
        <ul>
          <li><Link to='/home'>home</Link></li>
          <li><Link to='/about'>about</Link></li>
          <li><Link to='/profile'>profile</Link></li>
        </ul>
      </BrowserRouter>
    );
  }
}

export default index;

在子路由中使用

import React, { Component } from 'react';
import {
  Link
} from 'react-router-dom';
import { RouterView } from '../components';

class news extends Component {
  render() {
    return (
      <div>
        <Link to='/about/news/nav'>nav</Link>s
        {/* 在封装的路由组件中已经分配好了对应的路由表 */}
        <RouterView routes={this.props.routes}></RouterView>
      </div>
    );
  }
}

export default news;