参考:https://www.jianshu.com/p/fb201f82cf8c
安装 react-router-dom
npm install react-router-dom
一.基本使用
App.js
import React from 'react'
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import A from "../components/a";
import B from "../components/b";
import B1 from "../components/b1";
import C from "../components/c";
export default function App() {
return (
<Router>
<ul>
<li><Link to="/a">A 组件</Link></li>
<li><Link to="/b">B 组件</Link></li>
<li><Link to="/e">E 组件</Link></li>
</ul>
<Route>
<Switch>
<Route exact path="/a" component={A} />
<Route exact path="/b" component={B} />
<Route exact path="/" component={A} />
</Switch>
</Route>
</Router>
)
}
在index.js文件引入
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js' // App路由文件
ReactDOM.render(<App/>, document.getElementById('root'))
代码解析:
- 路由分为两种
BrowserRouter
和HashRouter
。两种用法类似,表现形式上有一定差异。<Switch>
路由中的Switch 代表只匹配一个路由,如果不使用<Switch>
嵌套,路由会多次匹配<Link>
标签,类似于<a>
标签(最终也会被渲染为 a 标签)。to
属性即可理解为 a 标签的 href属性<Route>
的path
表示属性匹配路径<Route>
的component
表示路径匹配成功后渲染的组件
二.路由传参
在 react 中 有两种方式进行路由传值
- 通过 原始的
GET
路径后面,添加?key=value
的方式- 在 组件内部 使用
this.props.location.search
的方式获取键值对(只不过获取过后还是一个字符串,需要进一步的解析)
- 在 组件内部 使用
- 通过动态路由传值(占位符)。类似于
/a/:id/:value
- 在组件内部 使用
this.props.match.params.xxxx
来获取。
- 在组件内部 使用
三.路由嵌套
使用<Route>
标签中的另一个属性 render,然后通过this.props.children来展示
import { Route, Switch} from "react-router-dom";
import A from "../components/a";
import B from "../components/b";
import B1 from "../components/b1";
import C from "../components/c";
import React from "react";
const Routers = () => {
return (
<Switch>
<Route exact path='/a/:age/:name' component={A}></Route>
<Route path='/b' render={()=>(
<B>
<Switch>
<Route exact path='/b/b1' component={B1}></Route>
</Switch>
</B>
)}></Route>
<Route exact path='/c' component={C}></Route>
</Switch>
)
}
//b组件
import React,{Component} from "react";
import { Link } from "react-router-dom";
class B extends Component{
constructor(props) {
super(props);
}
render() {
return (
<div>
B页面
<Link to='/b/b1'>B1</Link>
<div className={'ccccccccc'}>
{ this.props.children }
</div>
</div>
)
}
}
export default B