React 路由模块化

素颜马尾好姑娘i 2022-12-11 05:23 192阅读 0赞

[https://www.cnblogs.com/yuyujuan/p/10146421.html][https_www.cnblogs.com_yuyujuan_p_10146421.html]  他写得非常好了.不过是图 我贴代码.方便复制 感谢这个大佬

[https://www.jianshu.com/p/e05ed8b6e76e][https_www.jianshu.com_p_e05ed8b6e76e]

在vue中，可以将路由单独写在一个配置文件中，便于整理维护，而在前面总结整理的react中，都是直接将路由配置放在需要使用的地方，少数的时候话可以接受，但是当项目做大，这种方式就不再被推荐了，我们再react中，也可以向vue那样，将路由配置模块化，然后在需要使用的地方引入就可以了。

router.js

在router.js文件中配置路由。

因为时政要闻和娱乐新闻都是News组件下的二级路由，所以使用配置路由的时候也需要嵌套在news路径下。

import Home from '../pages/Home';
    import News from '../pages/News';
    import NewsOne from '../pages/NewsOne';
    import NewsTwo from '../pages/NewsTwo';
    
    let routes = [
      {
        path: "/",
        component: Home,
        exact:true,
      },
      {
        path: "/News",
        component: News,
        routes:[   /*嵌套路由*/
            {
              path: "/News",
              component: NewsOne
            },
            {
              path: "/News/NewsTwo",
              component: NewsTwo
            }
          ]
      }
    ];
    
    export default routes;

app.js

在App.js中，将二级路由使用父子组件传值的方式传递到子组件中去。

import React, { Component } from 'react';
    import './assets/css/App.css';
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    import routes from '../router/router.js';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <Router>
              <div> 
                <header className="title">  
                  <Link to="/">首页</Link>
                  <Link to="/news">新闻</Link>
                </header>
                {
                  routes.map((route,key)=>{
    
                      if(route.exact){
    
                        return <Route key={key} exact path={route.path}   
                        render={props => (
                          <route.component {...props} routes={route.routes} />
                        )}
                        />
                      }else{
                        return <Route  key={key}  path={route.path} 
                        render={props => (
                          <route.component {...props} routes={route.routes} />
                        )}
                        />
    
                      }
                  })
                }                            
              </div>
            </Router>
          </div>
        );
      }
    }
    
    export default App;

3，在需要使用嵌套路由的子组件中回去父组件传递的路由值，进行渲染。

import React, { Component } from 'react';
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    
    
    class News extends Component {
        constructor(props) {
            super(props);
            this.state = {  };
        }
        componentWillMount(){
            console.log(this.props.routes);
        }
        render() {
            return (
                <div>
                    <div className="user">
                        <div className="content">
                            <div className="left">
                                <Link to="/News/">xx</Link><br /><br />
                                <Link to="/News/NewsTwo">xxx</Link>
                            </div>
                            <div className="right">
                               {
                                    this.props.routes.map((route,key)=>{
                                         return   <Route key={key} exact path={route.path} component={route.component} />
                                    })
                                }
                            </div>
                        </div> 
                    </div>
                </div>
            );
        }
    }
    
    export default News;

[https_www.cnblogs.com_yuyujuan_p_10146421.html]: https://www.cnblogs.com/yuyujuan/p/10146421.html
[https_www.jianshu.com_p_e05ed8b6e76e]: https://www.jianshu.com/p/e05ed8b6e76e