⑤react-router4.x 路由模块化

本文主要是介绍⑤react-router4.x 路由模块化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

按照之前的写法，我们都是将Route手动填写进去，如果路由变得多，嵌套变得复杂，就会看上去很乱

之前的做法：

class App extends Component {render() {return (<Router><div>           <header className="title"><Link to="/">首页</Link><Link to="/news">新闻</Link><Link to="/product">商品</Link></header><Route exact path="/" component={Home} /><Route path="/news" component={News} />    <Route path="/product" component={Product} />                 </div></Router>);}
}

1、路由代码分离

现在我们 可以考虑把路由配置抽离出来，类似以下这样：

let routes = [{path: "/",component: Home,exact:true},{path: "/shop",component: Shop},{path: "/user",component: User},{path: "/news",component: News}
];class App extends Component {render() {return (<Router><div><header className="title"><Link to="/">首页组件</Link><Link to="/user">用户页面</Link><Link to="/shop">商

这篇关于⑤react-router4.x 路由模块化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---