React路由嵌套
/* react路由的配置: 1、找到官方文档 https://reacttraining.com/react-router/web/example/basic 2、安装 cnpm install react-router-dom --save 3、找到项目的根组件引入react-router-dom import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 4、复制官网文档根组件里面的内容进行修改 (加载的组件要提前引入) <Router> <Link to="/">首页</Link> <Link to="/news">新闻</Link> <Link to="/product">商品</Link> <Route exact path="/" component={Home} /> <Route path="/news" component={News} /> <Route path="/product" component={Product} /> </Router> exact表示严格匹配 react动态路由传值 1、动态路由配置 <Route path="/content/:aid" component={Content} /> 2、对应的动态路由加载的组件里面获取传值 this.props.match.params 跳转:<Link to={`/content/${value.aid}`}>{value.title}</Link> react get传值 1、获取 this.props.location.search */ 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 './assets/css/index.css' class App extends Component { render() { return ( <Router> <div> <header className="title"> <Link to="/">首页组件</Link> <Link to="/user">用户页面</Link> <Link to="/shop">商户</Link> </header> <Route exact path="/" component={Home} /> <Route path="/user" component={User} /> <Route path="/shop" component={Shop} /> </div> </Router> ); } } export default App;
import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import ShopAdd from './Shop/ShopAdd'; import ShopList from './Shop/ShopList'; class Shop extends Component { constructor(props) { super(props); this.state = { msg:'我是一个商户组件' }; } render() { return ( <div className="shop"> <div className="content"> <div className="left"> <Link to="/shop/">商户列表</Link> <br /> <br /> <Link to="/shop/add">增加商户</Link> </div> <div className="right"> <Route exact path={`${this.props.match.url}/`} component={ShopList} /> <Route path={`${this.props.match.url}/add`} component={ShopAdd} /> </div> </div> </div> ); } } export default Shop;
import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import Info from './User/Info'; import Main from './User/Main'; class User extends Component { constructor(props) { super(props); this.state = { msg:'我是一个User组件' }; } render() { return ( <div className="user"> <div className="content"> <div className="left"> <Link to="/user/">个人中心</Link> <br /> <br /> <Link to="/user/info">用户信息</Link> </div> <div className="right"> <Route exact path="/user/" component={Main} /> <Route path="/user/info" component={Info} /> </div> </div> </div> ); } } export default User;
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!