REACT_react中路由如何封装

悠悠 2023-03-03 11:18 33阅读 0赞

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;