一、路由模块化(用自定义路由,然后循环出来)
1.官方文档参考
【官方文档】https://reacttraining.com/react-router/web/guides/quick-start
【路由模块化实例】https://reacttraining.com/react-router/web/example/route-config
2.路由模块化:实现代码
App.js
import React from "react";
import { BrowserRouter as Router, Route ,Link } from "react-router-dom";
import "./assets/css/index.css";
import Home from "./components/Home.js";
import User from "./components/User.js";
import Shop from "./components/Shop.js";
import News from "./components/News.js";
let routes = [
{
path: "/",
component: Home,
exact: true,
},
{
path: "/user",
component: User,
},
{
path: "/shop",
component: Shop,
},
{
path: "/news",
component: News,
},
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<Router>
<div className="App">
{/* <Route path="/" exact component={Home}></Route>
<Route path="/pcontent/:id" component={Pcontent}></Route>
<Route path="/login" component={Login}></Route> */}
<div className="header">
<Link to="/">首页</Link>
<Link to="/user">个人中心</Link>
<Link to="/shop">商户</Link>
<Link to="/news">新闻</Link>
</div>
{
routes.map((route,key)=>{
if(route.exact){
return <Route key={key} path={route.path} exact component={route.component}></Route>
}else{
return <Route key={key} path={route.path} component={route.component} ></Route>
}
})
}
{/* <Route path="/" exact component={Home}></Route>
<Route path="/user" component={User}></Route>
<Route path="/shop" component={Shop}></Route> */}
</div>
</Router>
);
}
}
export default App;
3.路由模块化:更进一步,把路由单独放到一个文件里
3.1第一步先把路由定义抽出来:/src/model/routes.js
routes.js
import Home from "../components/Home.js";
import User from "../components/User.js";
import Shop from "../components/Shop.js";
import ShopList from "../components/Shop/ShopList.js";
import ShopAdd from "../components/Shop/ShopAdd.js";
import News from "../components/News.js";
let routes = [
{
path: "/",
component: Home,
exact: true,
},
{
path: "/user",
component: User,
},
{
path: "/shop",
component: Shop,
},
{
path: "/news",
component: News,
},
];
export default routes;
3.2第二步,引入routes.js到 /src/App.js
二、嵌套路由父子组件传值
src/model/router.js
import Home from "../components/Home.js";
import User from "../components/User.js";
import Shop from "../components/Shop.js";
import ShopList from "../components/Shop/ShopList.js";
import ShopAdd from "../components/Shop/ShopAdd.js";
import News from "../components/News.js";
let routes = [
{
path: "/",
component: Home,
exact: true,
},
{
path: "/user",
component: User,
},
{
path: "/shop",
component: Shop,
routes: [
{
path: "/shop/",
component: ShopList,
},
{
path: "/shop/add",
component: ShopAdd,
},
],
},
{
path: "/news",
component: News,
},
];
export default routes;
App.js
import React from "react";
import { BrowserRouter as Router, Route ,Link } from "react-router-dom";
import "./assets/css/index.css";
import routes from "./model/router.js";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<Router>
<div className="App">
<div className="header">
<Link to="/">首页</Link>
<Link to="/user">个人中心</Link>
<Link to="/shop">商户</Link>
<Link to="/news">新闻</Link>
</div>
{
routes.map((route,key)=>{
if(route.exact){
return <Route key={key} path={route.path} exact
render={props => (
<route.component {...props} routes={route.routes} />
)}
></Route>
}else{
return <Route key={key} path={route.path}
render={props => (
<route.component {...props} routes={route.routes} />
)}
></Route>
}
})
}
</div>
</Router>
);
}
}
export default App;
Shop.js
src/components/Home.js、News.js、Shop.js、User.js
Shop.js重点,其它都一样
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import ShopList from "./Shop/ShopList.js";
import ShopAdd from "./Shop/ShopAdd.js";
class Shop extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentWillMount(){
console.log(this.props.routes);
}
render() {
return (
<div className="shopbox">
<div className="content">
<div className="left">
<Link to="/shop/">商户列表</Link>
<br/><br/>
<Link to="/shop/add">增加商户</Link>
</div>
<div className="right">
{
this.props.routes.map((route,key)=>{
return <Route key={key} path={route.path} exact component={route.component} ></Route>
})
}
{/* <Route path={`${this.props.match.url}/`} exact component={ShopList} ></Route>
<Route path={`${this.props.match.url}/add`} component={ShopAdd} ></Route> */}
</div>
</div>
</div>
);
}
}
export default Shop;
/src/components/Shop/ShopAdd.js、ShopEdit.js、ShopList.js
内容都一样除了一些文字
import React, { Component } from 'react';
class UserAdd extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是一个User组件'
};
}
render() {
return (
<div className="user">
用户组件UserAdd
</div>
);
}
}
export default UserAdd;