大家好,又见面了,我是你们的朋友全栈君。
cnpm install -S react-router-dom@4.3.1
1、用BrowserRouter管理整个应用
import {BrowserRouter} from 'react-router-dom'
在index.js中,将<App />用<BrowserRouter>包裹起来,内部只能有一个根容器
2、路由跳转
import {NavLink,Link} from 'react-router-dom'
NavLink和Link都可以实现,且用法相同
<NavLink to='/about'>About</NavLink>
<NavLink to='/home'>home</NavLink>
3、路由显示(放在哪就在哪显示)
import {Switch,Route,Routes} from 'react-router-dom'
Switch:重复路径只匹配第一个
Routes:v6版本用来替代Switch
exact:精准匹配,一般放置在根路由,当'/'和'/xx',将exact放置在'/'路由上,访问'/xx'不会显示'/'
strict:严格匹配,即'/main'和'/mian/'不一样
<Route exact path='/' component={Home}></Route>
<Route path='/about' component={About}></Route>
4、路由重定向
import {Redirect} from 'react-router-dom'
不能放置在路由显示的第一个位置,否则无法触发
打开页面浏览器会自动重定向到'/about'路由
<Redirect to='/about'></Redirect>
<Redirect from='/当前路由' to='/指定路由'> 从当前路由跳转到指定路由
其中在动态使用重定向需要return
if(xx)
{
return <Redirect to={redirectTo}></Redirect>
}
5、路由高亮选中样式
<NavLink to='/home' activeClassName="selected">home</NavLink>
封装标签后:
在标签上使用 {...this.props} 能将组件传递的参数/样式,全部放进标签上
6、路由嵌套
父路由:
NavLink指定跳转链接,路径要加上父路由的路径,'/x/xx'
Switch和Route指定子路由显示位置
Redirect对子路由重定向
7、路由跳转携带参数
参数传递以及参数名设置
NavLink中:to={to='/home/msg/detail/参数'},变量使用{`${}`}或字符串拼接
Route中:path='/home/msg/detail/:接收参数名?'
‘?’号表示为可选参数
调用参数:
this.props.match.params.参数名
8、动态跳转
this.props.history.push('路径'') /('路径',{参数键值对})
this.props.history.replace('xx')
this.props.history.go(数值); 根据栈来跳转
this.props.history.goBack();
this.props.history.goForward();
方式一:
<Route path='/home/msg/detail/:id' component={Detail}> </Route>
回调中:this.props.history.push('/home/msg/detail/5')
接收:{this.props.match.params.id}
方式二:
回调中:this.props.history.push('/home/msg/detail',{id:5})
接收:{this.props.location.state.id}
9、获取当前路由的url('/xx')
this.props.location.pathname;
10、非路由组件使用路由组件属性(props.history等)
import {withRouter} from 'react-router-dom'
最后导出组件:export default withRouter(组件);
11、离开页面弹窗
import {Prompt} from 'react-router-dom'
<Prompt
when={触发条件} 不写,则离开当前页面时触发弹窗
message='弹窗内容' / {(location)=>{ 可以通过函数返回内容 }}
/>
代码示例:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {
BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
App.js:
import React from 'react';
import './App.css';
import About from './views/about'
import Home from './views/home'
import {
NavLink,Switch,Route,Link,Redirect} from 'react-router-dom'
import CADD from './components/comment_add/commentAdd.jsx';
import CAI from './components/comment_list/commentList';
class App extends React.Component{
state={
searchName:''
}
setName=(searchName)=>{
this.setState({
searchName:searchName
});
}
render()
{
return(
<div>
<NavLink to='/about' activeClassName="selected" >About</NavLink>
<NavLink to='/home' activeClassName="selected">home</NavLink>
<div>
<Switch>
<Route path='/about' component={
About} ></Route>
<Route path='/home' component={
Home}></Route>
<Redirect to='/about'></Redirect>
</Switch>
</div>
</div>
)
}
}
export default App;
子路由:
import React,{
Component } from "react";
import {
NavLink,Route,Redirect,Switch} from 'react-router-dom'
import News from './news';
import Msg from './msg';
import './home.css';
export default class App extends Component{
render()
{
return(
<div>
<div>
<NavLink to='/home/news' activeClassName='selected2'>news</NavLink>
<NavLink to='/home/msg' activeClassName='selected2'>msg</NavLink>
</div>
<Switch>
<Route path='/home/news' component={
News}></Route>
<Route path='/home/msg' component={
Msg}></Route>
<Redirect to='/home/news'></Redirect>
</Switch>
</div>
)
}
}
子子路由:
import React,{
Component } from "react";
import {
NavLink,Route,Redirect,Switch} from 'react-router-dom'
import './home.css';
import Detail from './detail';
export default class App extends Component{
render()
{
return(
<div>
<ul>
<NavLink activeClassName='selected2'to='/home/msg/detail/1'>msg1</NavLink>
<NavLink activeClassName='selected2'to='/home/msg/detail/2'>msg2</NavLink>
<NavLink activeClassName='selected2'to='/home/msg/detail/3'>msg3</NavLink>
</ul>
<button onClick={
this.back}>返回</button>
<button onClick={
this.go}>前进</button>
<div>
<Switch>
<Route path='/home/msg/detail' component={
Detail}> </Route>
</Switch>
</div>
</div>
)
}
back=()=>{
this.props.history.push('/home/msg/detail',{
id:5})
}
go=()=>{
}
}
子子子路由:
import React,{
Component } from "react";
export default class App extends Component{
render()
{
return(
<div>
{
/* <li>{this.props.match.params.id}</li> */}
<li>{
this.props.location.state.id}</li>
</div>
)
}
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130459.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...