基本使用
- 下载react-router-dom
npm i react-router-dom -S
- 按需引入 HashRouter,BrowserRouter,Route,Switch,NavLink,Redirect
- HashRouter和BrowserRouter代表路由的坑，区别是BrowserRouter的路由没有#
- Route代表锚点以及组件填入的值
- Switch 选择一个
- 横向匹配一个
- 在被其包裹的Route中从上到下，需要出path一致（只会匹配一个）
- exact 精确匹配
- Redirect 默认重定向，相当于404
- NavLink 相当于Vue中的router-link
demo 混合
import React,{Component} from 'react';
import { HashRouter,BrowserRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
class Home extends Component {
render(){
return (
<div>
<h1>我是首页</h1>
<NavLink to="/send/happy" activeStyle={{color: 'red'}}>电视剧</NavLink>
<NavLink to="/send/moment" activeClassName="selected">电影</NavLink>
<hr />
</div>
)
}
}
class Send extends Component {
render(){
return (
<div>
<h1>我是发送页面</h1>
<Route path ="/send/happy" component={HappyNews}></Route>
<Route path ="/send/moment" component={MomentNews}></Route>
<hr />
</div>
)
}
}
class HappyNews extends Component {
render(){
return <h4>娱乐新闻</h4>
}
}
class MomentNews extends Component {
render(){
return <h4>事实新闻</h4>
}
}
export default class App extends Component {
render(){
return(
<div>
<header>头部</header>
{/* 中间用于路由放坑 */}
<React.Fragment>
<Router>
{/* 若没有精确匹配，此时的页面为 我是首页 我是发送页面，因为'/'是模糊匹配，
同时需要注意，exact仅用于'/',纵向匹配一个，否则会影响嵌套路由 */}
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/send" component={Send}></Route>
{/* 没有正确匹配的路径 则为'/'，需要注意路径一致，需要Switch进行横向匹配唯一 */}
<Redirect to="/"></Redirect>
</Switch>
</Router>
</React.Fragment>
<footer>尾部</footer>
</div>
)
}
}
路由传参
- params
- query
- push 链式导航以及前进后退
App组件
export default class App extends Component {
render(){
let queryObj ={
pathname: '/homeQ',
id: 6
}
return (
<div>
<header>头部</header>
<React.Fragment>
<Router>
{/* params传参 */}
<Route path="/home/:id" component={Home}></Route>
<NavLink to="/home/9">params去Home</NavLink> <br />
{/* query传参 */}
<Route path="/homeQ" component = {Home}></Route>
<NavLink to="/homeQ?id=2">query去Home</NavLink> <br />
<NavLink to={queryObj}>query对象去Home</NavLink>
</Router>
</React.Fragment>
<footer>尾部</footer>
</div>
)
}
}
Home组件
class Home extends Component {
constructor(props){
super(props)
}
componentDidMount(){
console.log(this.props)
// 若为params
// this.props.match.params.id
// 若为query
// this.props.location
}
onClickChange= ()=>{
this.props.history.push({
pathname: '/user',
state: {
id: 3
}
})
}
onClickGoBack= ()=>{
this.props.history.goBack(); // 后退
this.props.history.goForward(); // 前进
}
render(){
return (
<div>
<h4>我是home</h4>
<button onClick ={this.onClickChange}>点击pushURL去user</button>
<br />
<button onClick = {this.onClickGoBack}>前进/后退</button>
<Route path="/user" component = {User}></Route>
</div>
)
}
}
demo拆分
router.js
import React, {Component} from 'react';
import {HashRouter as Router,Link,Switch,Route} from 'react-router-dom';
import Home from './Home'
import Main from '../router2/Main'
import About from '../router2/About'
import Top from '../router2/Top'
export default class Detail extends Component {
render(){
return(
<Router>
<div>
<Home>
<Route path='/home' render={()=>
<Main>
<Route path="/home/a" component={About}></Route>
</Main>
}>
</Route>
<Route path='/about' component={About}></Route>
<Route path='/top' component={Top}></Route>
</Home>
</div>
</Router>
)
}
}
home.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
export default class Home extends Component {
render(){
return(
<div>
<ul>
<li>
<Link to="/home">home</Link>
</li>
<li>
<Link to="/about">about</Link>
</li>
<li>
<Link to="/top">top</Link>
</li>
</ul>
<hr/>
{ this.props.children }
</div>
)
}
}
// 嵌套路由的组件
import React, {Component} from 'react';
import {Link} from 'react-router-dom'
export default class Main extends Component {
render(){
return(
<div>
main
<Link to="/home/a">嵌套路由</Link>
{this.props.children}
</div>
)
}
}
