react-router 安装-使用
安装
yarn add react-router-dom
或者
npm install react-router-dom
在src/pages中创建两个文件
编辑src中的 App.js
import React from 'react';
import Home from './pages/Home'
import Mine from './pages/Mine'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<Route path='/home' component={Home}></Route>
<Route path='/mine' component={Mine} ></Route>
</Router>
</div>
);
}
export default App;
react 的 BrowserRouter 和 HashRouter 理解
BrowserRouter h5新特性 ： 上线需要做重定向处理
http://127.0.0.1:3000/article/num1
HashRouter 锚点链接：
http://127.0.0.1:3000/#/article/num1（不一定是这样，但#是少不了的）
路径匹配精准 exact
为真时，仅当路径与位置匹配时才匹配。路径名。
如果不加 不会精准匹配
import React from 'react';
import Home from './pages/Home'
import Mine from './pages/Mine'
import Ucenter from './pages/Ucr'
import {
HashRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<ul>
<li><Link to='/home'>Home页面</Link></li>
<li><Link to='/mine'>Mine页面</Link></li>
<li><Link to='/mine/ucenter'>ucenter页面</Link></li>
</ul>
<Route path='/home' component={Home}></Route>
<Route exact path='/mine' component={Mine} ></Route>
<Route exact path='/mine/ucenter' component={Ucenter}></Route>
</Router>
</div>
);
}
export default App;
执行结果：
更加精准匹配 strict={true}
// 示例
// 浏览器访问
// http://localhost:3000/home 和http://localhost:3000/home/ 是两个路径
<Router>
<ul>
<li><Link to='/home'>Home页面</Link></li>
<li><Link to='/mine'>Mine页面</Link></li>
<li><Link to='/mine/ucenter'>ucenter页面</Link></li>
</ul>
<Route strict={true} path='/home' component={Home}></Route>
<Route exact path='/mine' component={Mine} ></Route>
<Route exact path='/mine/ucenter' component={Ucenter}></Route>
</Router>
设置404页面
Switch 只加载一个页面
<Router>
<ul>
<li><Link to='/home'>Home页面</Link></li>
<li><Link to='/mine'>Mine页面</Link></li>
<li><Link to='/mine/ucenter'>ucenter页面</Link></li>
</ul>
<Switch>
<Route path='/home' component={Home}></Route>
<Route exact path='/mine' component={Mine} ></Route>
<Route exact path='/mine/ucenter' component={Ucenter}></Route>
<Route component={NotFound} ></Route> // 这里是设置404页面
</Switch>
</Router>
页面跳转 Link
import React from 'react';
import Home from './pages/Home'
import Mine from './pages/Mine'
import {
HashRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<ul>
<li><Link to='/home'>Home页面</Link></li>
<li><Link to='/mine'>Mine页面</Link></li>
</ul>
<Route path='/home' component={Home}></Route>
<Route path='/mine' component={Mine} ></Route>
</Router>
</div>
);
}
export default App;
NavLink 选中添加样式
一个特殊版本的，它将在匹配当前URL时向呈现的元素添加样式属性
activeClassName: 选中的class名
activeStyle: 选中的样式
<ul>
<li><NavLink activeClassName="selected" activeStyle={{color: 'red'}} to='/home'>Home页面</NavLink></li>
<li><NavLink to='/mine'>Mine页面</NavLink></li>
<li><NavLink to='/mine/ucenter'>ucenter页面</NavLink></li>
</ul>
执行后
隐形传递参数
<Link
to={{
pathname: "/home",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true, flag:'测试测试' } // 隐藏属性 可以传递隐蔽的东西
}}
/>
参数接收
<Router>
<Switch>
//必传
<Route exact path='/mine/ucenter/:id' component={Ucenter}></Route>
// 加问号可传可不传
<Route exact path='/mine/ucenter/:id?' component={Ucenter}></Route>
</Switch>
</Router>
传参数
http://localhost:3000/#/mine/ucenter/10
获取 /mine/ucenter/10/weixi
//接收参数
constructor(porps){
super(porps)
console.log(porps.match.params.id)
}
获取 ?name=11212&age=12 值
constructor(porps){
super(porps)
//方法一
const params = new URLSearchParams(porps.location.search)
console.log(params.get('name'))
// 方法二
// const val = querystring.parse(porps.location.search)
// console.log(val.name)
}
重定向 Redirect
// 访问/hellow 重定向到 /mine页面
<Router>
<Redirect form="/hellow" to="/mine" />
</Router>
页面跳转
import React, { Component } from 'react'
const Mine = (porps) => {
const clockebacl = () => {
console.log(porps)
porps.history.push('/home') //上一次页面存在
porps.history.replace('/home') // 上一次页面不存在
}
return (
<div>
<p>Mine页面</p>
<div onClick={ clockebacl }>回到页面</div>
</div>
)
}
export default Mine
如果路由被管理的情况下
import MineDemo from './MineDemo'
import { withRouter } from 'react-router-dom'
class Mine extends React.Component{
constructor(props){
super(props)
}
clockebacl() {
console.log(this.props)
// porps.history.push('/home') //上一次页面存在
// this.props.history.replace('/home') // 上一次页面不存在
}
render() {
return (
<div>
<p>Mine页面</p>
<div onClick={ this.clockebacl.bind(this) }>回到页面</div>
<MineDemo />
</div>
)
}
}
export default Mine
如果路由没有被管理
import React, { Component } from 'react'
import { withRouter } from "react-router-dom"; // 不调取这个this.props为空对象
class MineDemo extends Component {
constructor(props) {
super(props);
console.log(this)
}
sssss() {
console.log(this.props)
this.props.history.push('/home')
}
render() {
return (
<div>
跳转页面
<div onClick={ this.sssss.bind(this) }>回到home</div>
</div>
)
}
}
export default withRouter(MineDemo)
如果在填充数据时要跳转页面提示用户 Prompt
import React, { Component } from 'react'
import { Prompt } from 'react-router-dom'
export default class Home extends Component {
constructor(porps){
super(porps)
console.log(porps);
this.state = {
name:''
}
}
chinfgh(e) {
this.setState({
name: e.target.value
})
}
render() {
return (
<div>
<p>home页面</p>
<Prompt
when = { !!this.state.name }
message = { '确定要离开吗？'}
/>
<input type="text" value={this.state.name} onChange={this.chinfgh.bind(this)}/>
</div>
)
}
}
路由嵌套
创建三个文件
Book.jsx
JavaBook.jsx
WebBook.jsx
内容
// WebBook.jsx
import React, { Component } from 'react'
export default class WebBook extends Component {
render() {
return (
<div>
WebBook
</div>
)
}
}
// JavaBook.jsx
import React, { Component } from 'react'
export default class JavaBook extends Component {
render() {
return (
<div>
javaBook
</div>
)
}
}
// WBook.jsx
import React, { Component } from 'react'
export default class Book extends Component {
render() {
return (
<div>
Book{ this.props.children}
</div>
)
}
}
// App.jsx
import React from 'react';
import {BrowserRouter as Router,Switch, Route} from "react-router-dom";
import Book from './pages/Book'
import JavaBook from './pages/JavaBook'
import WebBook from './pages/WebBook'
function App() {
return (
<div className="App">
<Router>
<Switch>
<Book>
<Route path='/book/javab' component={ JavaBook }></Route>
<Route path='/book/webb' component={ WebBook }></Route>
</Book>
</Switch>
</Router>
</div>
);
}
export default App;