为什么要编写路由配置
当应用程序的路由越来越多的时候，页面看上去会非常的不整洁，例如：
<Router>
<Route path="/1" component={1}>
<Route path="/1" component={1}>
<Route path="/1" component={1}>
<Route path="/1" component={1}>
<Route path="/1" component={1}>
<Route path="/1" component={1}>
<Route path="/1" component={1}>
<Route path="/1" component={1}>
</Router>
const 1 = () =>
<React.Fragment>
<Route path="/1/1" component={1.1}/>
<Route path="/1/1" component={1.1}/>
<Route path="/1/1" component={1.1}/>
<Route path="/1/1" component={1.1}/>
<Route path="/1/1" component={1.1}/>
<Route path="/1/1" component={1.1}/>
<Route path="/1/1" component={1.1}/>
</React.Fragment>
以上是一个案例，看上去我们的页面会变得非常臃肿以及难以维护， 当然以上的例子是我瞎编的，实际上难不难维护？ 不得而知，没实践过。
然而自react-router 4.0以后推出了路由配置（因为没用过2.0版本，所以不知道有没有，这里就假设他没有好了），它是一个数组，保存了很多路由表的JSON对象，当然这已经是老生常谈了，随便百度一下就知道。
react rouer 官方示例中，有一个介绍路由表配置的页面，具体如下：
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// Some folks find value in a centralized route config.
// A route config is just data. React is great at mapping
// data into components, and <Route> is a component.
////////////////////////////////////////////////////////////
// first our route components
function Sandwiches() {
return <h2>Sandwiches</h2>;
}
function Tacos({ routes }) {
return (
<div>
<h2>Tacos</h2>
<ul>
<li>
<Link to="/tacos/bus">Bus</Link>
</li>
<li>
<Link to="/tacos/cart">Cart</Link>
</li>
</ul>
{routes.map((route, i) => (
<RouteWithSubRoutes key={i} {...route} />
))}
</div>
);
}
function Bus() {
return <h3>Bus</h3>;
}
function Cart() {
return <h3>Cart</h3>;
}
////////////////////////////////////////////////////////////
// then our route config
const routes = [
{
path: "/sandwiches",
component: Sandwiches
},
{
path: "/tacos",
component: Tacos,
routes: [
{
path: "/tacos/bus",
component: Bus
},
{
path: "/tacos/cart",
component: Cart
}
]
}
];
// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
function RouteWithSubRoutes(route) {
return (
<Route
path={route.path}
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes} />
)}
/>
);
}
function RouteConfigExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/tacos">Tacos</Link>
</li>
<li>
<Link to="/sandwiches">Sandwiches</Link>
</li>
</ul>
{routes.map((route, i) => (
<RouteWithSubRoutes key={i} {...route} />
))}
</div>
</Router>
);
}
export default RouteConfigExample;
以上这个示例，他们提供了一个非常不友好的渲染函数，不过足够让我们得到启发，假设我们在父级路由中有子路由（废话，没有子路由哪来的父级路由），我们需要将该路由的配置表传入对应组件中， 卧槽这跟没配置有区别嘛？ 我做路由配置表不就是为了让路由和组件分离出来嘛？ 于是，我们必须要制作一个属于自己的路由渲染函数， 利用这个渲染函数来传递生成路由，然后统一传入到组件中，这样是不是会方便很多呢？ 答案是肯定的。
说一点题外话，实际上上面这个案例已经做了一个渲染函数了，只是这个函数特别的白痴，只支持1级渲染，如果要使用多级渲染我们则使用递归函数即可。
针对不同的项目，不同的需求自定义路由的渲染函数是非常有必要的，以下是递归调用渲染：
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// Some folks find value in a centralized route config.
// A route config is just data. React is great at mapping
// data into components, and <Route> is a component.
////////////////////////////////////////////////////////////
// first our route components
function Sandwiches({children}) {
return (
<div>
<h2>Sandwiches</h2>
<ul>
<li>
<Link to="/sandwiches/add">Add Sandwiches</Link>
</li>
<li>
<Link to="/sandwiches/delete">Delete Sandwiches</Link>
</li>
</ul>
{children}
</div>
);
}
function Tacos({ children }) {
return (
<div>
<h2>Tacos</h2>
<ul>
<li>
<Link to="/tacos/bus">Bus</Link>
</li>
<li>
<Link to="/tacos/cart">Cart</Link>
</li>
</ul>
{children}
</div>
);
}
function Bus() {
return (
<h3>Bus</h3>
);
}
function Cart() {
return <h3>Cart</h3>;
}
function AddSandwiche() {
return <h3>sandwiches is added</h3>
}
function DeleteSandwiche({ match }) {
return <h3>sandwiches is deleted</h3>
}
////////////////////////////////////////////////////////////
// then our route config
const routes = [
{
path: "/sandwiches",
component: Sandwiches,
routes:[
{
path: "/sandwiches/add",
component: AddSandwiche,
},
{
path:"/sandwiches/delete/:id",
component: DeleteSandwiche,
}
]
},
{
path: "/tacos",
component: Tacos,
routes: [
{
path: "/tacos/bus",
component: Bus
},
{
path: "/tacos/cart",
component: Cart
}
]
}
];
// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
function RouteWithSubRoutes(route) {
let children = [];
if(route.routes) {
children = route.routes.map(function(route, index){
return RouteWithSubRoutes(route);
});
}
return (
<Route
path={route.path}
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} children={children} />
)}
/>
);
}
function RouteConfigExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/tacos">Tacos</Link>
</li>
<li>
<Link to="/sandwiches">Sandwiches</Link>
</li>
</ul>
{routes.map((route, i) => (
<RouteWithSubRoutes key={i} {...route} />
))}
</div>
</Router>
);
}
export default RouteConfigExample;
