REACT_react中路由如何封装

1.新建文件
/routes/index.js
/routes/routes.js

2.封装路由文件

• index.js

可以导入相应的组件，也可以直接在里面定义组件，建议导入方式更清晰

import React,{Component} from 'react';

//导入组件
import Banner from '../other/banner'

// 音乐组件
class Music extends Component {
  render(){
    return <h1>Music</h1>
  }
}
//类别组件
class Category extends Component {
  render(){
  return <h1>Category </h1>
  }
}

let routes = [
    {
        path:'/index',
        component:Banner
    },
    {
        path:'/tool',
        component:Category
    },
    {
        path:'/music',
        component:Music
    }
]
export default  routes;

2.使用

• 注意：使用路由必须引入路由标签，并且使用 标签包裹
• routes.js

import React,{Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import routes from './index'			//当如封装的路由文件

class Routes extends Component {
    constructor(){
      super();
      this.state = {
        n:999
      }
    }
    render(){
      return (
        <Router>
            {/* 跳转 */}
            <ul>
              <li>
                <Link to='/index'>首页</Link>
              </li>
              <li>
                <Link to='/tool'>工具模块</Link>
              </li>
              <li>
                <Link to='/music'>音乐模块</Link>
              </li>
            </ul>
            {/* 渲染出口 */}
            <div>
              {
                routes.map((item,i)=>{
                  return <Route key={i} path={item.path} component={item.component} ></Route>
                })
              }
            </div>
        </Router>
      )
    }
  }
  export default Routes;