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;