React的路由封装

1,159

第一步安装

npm install react-router-dom

第二步在src目录下创建新文件夹

(1)先创建router文件夹 (2)然后创建router.config.js和router.view.js (3)在router.view.js中引入

import React, { Component } from "react";

import { Switch, Route, Redirect } from "react-router-dom";

封装

export default class Index extends Component {

render() {

const { routes } = this.props;

const NormalRoutes = routes.filter((item) => 
!item.to);

const redirectRoutes = routes

  .filter((item) => item.to)
  
  .map((item, index) => (
  
    <Redirect key={index} to={item.to} from=
    {item.from} />
    
  ));
  
return (

  <Switch>
  
    {NormalRoutes.map((item, index) => (
    
      <Route
      
        path={item.path}
        
        key={index}
        
        render={(props) => (
        
          <item.component {...props} routes=
          {item.children} />
        )}
      />
    )).concat(redirectRoutes)}
  </Switch>
);

} }