React 路由模块化,分离,嵌套传值
模块化
import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import Home from './components/Home'; import User from './components/User'; import Shop from './components/Shop'; import News from './components/News'; import './assets/css/index.css'; 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">商户</Link> <Link to="/news">新闻</Link> </header> { routes.map((route,key)=>{ if(route.exact){ return <Route key={key} exact path={route.path} component={route.component}/> }else{ return <Route key={key} path={route.path} component={route.component}/> } }) } </div> </Router> ); } } export default App;
分离
import Home from '../components/Home'; import User from '../components/User'; import Shop from '../components/Shop'; import News from '../components/News'; let routes = [ { path: "/", component: Home, exact:true }, { path: "/shop", component: Shop }, { path: "/user", component: User }, { path: "/news", component: News } ]; export default routes;
import React, { Component } 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 Component { render() { return ( <Router> <div> <header className="title"> <Link to="/">首页组件</Link> <Link to="/user">用户页面</Link> <Link to="/shop">商户</Link> <Link to="/news">新闻</Link> </header> { routes.map((route,key)=>{ if(route.exact){ return <Route key={key} exact path={route.path} component={route.component}/> }else{ return <Route key={key} path={route.path} component={route.component}/> } }) } </div> </Router> ); } } export default App;
嵌套传值
import Home from '../components/Home'; import User from '../components/User'; import UserList from '../components/User/UserList'; import UserAdd from '../components/User/UserAdd'; import UserEdit from '../components/User/UserEdit'; import Shop from '../components/Shop'; import News from '../components/News'; let routes = [ { path: "/", component: Home, exact:true }, { path: "/shop", component: Shop }, { path: "/user", component: User, routes:[ /*嵌套路由*/ { path: "/user/", component: UserList }, { path: "/user/add", component: UserAdd }, { path: "/user/edit", component: UserEdit } ] }, { path: "/news", component: News } ]; export default routes;
import React, { Component } 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 Component { render() { return ( <Router> <div> <header className="title"> <Link to="/">首页组件</Link> <Link to="/user">用户页面</Link> <Link to="/shop">商户</Link> <Link to="/news">新闻</Link> </header> { routes.map((route,key)=>{ if(route.exact){ return <Route key={key} exact path={route.path} // route.component value.component <User {...props} routes={route.routes} /> render={props => ( // pass the sub-routes down to keep nesting <route.component {...props} routes={route.routes} /> )} /> }else{ return <Route key={key} path={route.path} render={props => ( // pass the sub-routes down to keep nesting <route.component {...props} routes={route.routes} /> )} /> } }) } </div> </Router> ); } } export default App;
import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; class User extends Component { constructor(props) { super(props); this.state = { msg:'我是一个User组件' }; } componentWillMount(){ console.log(this.props.routes); } render() { return ( <div className="user"> <div className="content"> <div className="left"> <Link to="/user/">用户列表</Link> <br /> <br /> <Link to="/user/add">增加用户</Link> <br /> <br /> <Link to="/user/edit">编辑用户</Link> </div> <div className="right"> { this.props.routes.map((route,key)=>{ return <Route key={key} exact path={route.path} component={route.component} /> }) } {/* <Route path="/user/add" component={UserAdd} /> */} </div> </div> </div> ); } } export default User;
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!