路由
根据不同的url 来切换对应的组件
实现spa(单页面应用)应用:
整个项目只有一个完整页面
页面切换不会刷新页面(不会感觉页面的闪烁 更加贴近原声应用的体验)
当前版本 V5
一、 路由-分类
1、React-Router:提供了一些router的核心API,包括Router, Route, Switch等,但是它没有提供 DOM 操作进行跳转的API。
2、React-Router-DOM:提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转,大多数情况下我们是这种情况,所以在开发过程中,我们更多是使用React-Router-DOM。
二、路由模式-HashRouter 和 BrowserRouter
1、HashRouter (hash模式)
url中会有个#,例如localhost:3000/#,HashRouter就会出现这种情况,它是通过hash值来对路由进行控制。如果你使用HashRouter,你的路由就会默认有这个#。刷新不会丢失
2、BrowserRouter(历史记录模式 )
是通过历史记录api来进行路由的切换的很多情况下我们则不是这种情况,我们不需要这个#,因为它看起来很怪,这时我们就需要用到BrowserRouter。刷新会丢失404(上线中会出现问题 本地开发中不会)
三、路由-link与switch
1、Link 主要API是to,to可以接受string或者一个object,来控制url。
2、NavLink 它可以为当前选中的路由设置类名、样式以及回调函数等,to属性跳转路径activeClassName当元素处于活动状态时应用于元素的样式
四、路由基本使用
路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时,就渲染出对应的 UI 界面。
1.下载路由模块
npm install --save react-router-dom
2.在index.js引用路由模块
import { BrowserRouter} from ‘react-router-dom’;
3.在index.js使用路由模式包裹跟组件
4.在app.js中引用路由出口
import {Route} from “react-router-dom”
5.配置
五、路由模式—hash模式
要切换hash模式只需要在 index.js设置路由模式即可
import { BrowserRouter } from "react-router-dom"
ReactDOM.render(
<BrowserRouter> <App /> </BrowserRouter>,
document.getElementById('root')
);
六、路由导航
使用Link组件即可 to属性就是地址
使用NavLink 会比link多有个class 如果不喜欢默认的类名active 可以手动设置选中Class方便样式设置
import React, { Component } from 'react'
import {Route,Link,NavLink,Switch,Redirect } from "react-router-dom"
import Home from "../views/home.jsx"
import My from "../views/my.jsx"
import List from "../views/list.jsx"
import Democ from "../views/democ.jsx"
import Pagelink from "../components/pagelink.jsx"
export default class index extends Component {
render() {
return (
<div>
<Link to="/">home</Link><br/>
<Link to="/my">my</Link><br/>
<NavLink to="/list" activeClassName="a">list</NavLink>
{/* <Pagelink></Pagelink> */}
<hr></hr>
<Switch>
<Route path="/home" exact component={Home}></Route>
<Route path="/my" component={My}></Route>
<Route path="/list" component={List}></Route>
{/* 设置重定向 */}
<Redirect from="/" to="/home" exact></Redirect>
{/*404页面写在最下面,不需要设置path */}
<Route component={Democ}></Route>
</Switch>
</div>
)
}
}
注意:如果在vscode的终端中启动项目可能会无效 在外部cmd中启动
七、exact 属性 强制匹配
exact代表当前路由path的路径采用精确匹配,比如说Home的path如果不加上exact,那么path="/about"将会匹配他自己与path="/“这两个,所以一般path=”/"这个路由一般会加上exact,另外需要注意一点的是嵌套路由不要加exact属性,如果父级路由加上,这里例如topics加上该属性,他下面的子路由将不会生效,因为外层强制匹配了。
八、路由–404页面
有的时候用户可能会错误修改相关url 但是并没有相关路由 解决方式设置404路由组件 但是有问题不管到那个页面都会有这个404路由组件
{/*404页面写在最下面,不需要设置path */}
九、< Switch>
为了解决route的唯一渲染,它是为了保证路由只渲染一个路径。
<Switch>
<Route path="/home" exact component={Home}></Route>
<Route path="/my" component={My}></Route>
<Route path="/list" component={List}></Route>
{/* 设置重定向 */}
<Redirect from="/" to="/home" exact></Redirect>
{/*404页面写在最下面,不需要设置path */}
<Route component={Democ}></Route>
</Switch>
但是初始化的时候还是404组件
十、路由–重定向
导入Redirect
import { BrowserRouter,Route,Link,NavLink,Redirect } from ‘react-router-dom’
定义重定向路径
十一、 二级路由
1 、在子页面中引用路由模块
import {Route,Link} from ‘react-router-dom’;
2.设置相关规则 与路由导航
home3、 Home
import React, { Component } from 'react'
import {Route,NavLink} from 'react-router-dom'
import Era from "./era"
export default class home extends Component {
render() {
return (
<div>
home <br></br>
<NavLink to="/home/era">homeson</NavLink>
<Route path="/home/era" component={Era}></Route>
</div>
)
}
}
十二 路由跳转
1、push方法在路由页面中跳转 this.props.history.push("/xxxx")
<button onClick={()=>{this.props.history.push("/list")}}>去list</button>
<button onClick={()=>{this.props.history.goBack()}}>back</button> //返回上一级
会有报错:
Type error:Cannot read property of “push” of undefine
解决方式:引用withRouter组件
import {NavLink,Link,withRouter} from “react-router-dom”
export default withRouter(pagelink)
十三、路由–withRouter
withRouter作用是让不是路由切换的组件也具有路由切换组件的三个属性(location match history)
监控路由的变化 在app.js中添加看看效果
props.history.listen((location)=>{
//locatin.pathname 会根据路由的变化而变化
})
十四、 路由–js跳转
replace() 替换当前路径
goBack()后退
goForward()前进
十五、 路由—传参params方式
1\在 Router标签后面拼接传递参数的名字
2、 设置发送的数据
list3、在需要接受的路由组建中接受
this.props.match.params.name
十六、路由—传参params方式优缺点
优势 : 刷新地址栏,参数依然存在
缺点 : 只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。
十七、 路由—传参state**//***
1、在Link中设置发送的数据
2、在需要接受的路由组建中接受
console.log(this.props.location. state.name)
优势:传参优雅地址栏不显示传递的数据,传递参数可传对象;
缺点:刷新地址栏,参数丢失
十八、路由render渲染写法
修改Route 里面的组件调用方式为:
render={(props)=>{return <组件/>}}
render调用一个函数那么我们就可以决定什么时候渲染他 同时传入props那么就可以在路由组件中使用history: {…}, location: {…}, match: {…}这几个对象
<Route path="/rr" render={(props)=>{
return true? <Renderrouter {...props} mes="render"/>:<Redirect to="7iku"/>}}>
</Route>
路由render渲染写法传递数据 取值
this.props.mes
路由验证
如果想对路由进行验证的话只需要在函数中进行逻辑编写 既可以设置具体渲染那个组件
return true or false