react路由
开始今天的话题之前，让我们先来了解一下前端路由，Ajax诞生以后，解决了每次用户操作都要向服务器端发起请求重刷整个页面的问题，但随之而来的问题是无法保存Ajax操作状态，浏览器的前进后退功能也不可用，当下流行的两种解决方法是：
- hash, hash原本的作用是为一个很长的文档页添加锚点信息，它自带不改变url刷新页面的功能，所以自然而然被用在记录Ajax操作状态中了。
- history, 应该说history是主流的解决方案，浏览器的前进后退用的就是这个，它是window对象下的，以前的history提供的方法只能做页面之间的前进后退，如下：
为了让history不仅仅能回退到上一个页面，还可以回到上一个操作状态。HTML5新增了三个方法，其中两个是在history对象里的：
history.go(number|URL)可加载历史列表中的某个具体的页面history.forward()可加载历史列表中的下一个 URLhistory.back()可加载历史列表中的前一个 URL
为了让history不仅仅能回退到上一个页面，还可以回到上一个操作状态。HTML5新增了三个方法，其中两个是在history对象里的：
history.pushState(state, title, url)
添加一条历史记录， state用于传递参数，可以为空。title是设置历史记录的标题，可以为空。url是历史记录的URL，不可以为空。history.replaceState(state, title, url)
将history堆栈中当前的记录替换成这里的url，参数同上。
还有一个事件在window对象下：
window.onpopstate()监听url的变化，会忽略hash的变化（hash变化有一个onhashchange事件），但是前面的两个事件不会触发它。
好了，到这里你大概猜到了单页面应用或者Ajax操作记录状态用的就是hash和h5增加的history API，这就是react-router-dom 扩展的路由实现，也是web应用最常用的两种路由。
react 路由
安装
yarn add react-router-dom
基本路由
导入路由需要的组件
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
路由组件解释
Router 总路由
link 路由导航
----to 切换的链接
Route 路由
----path 对应链接
----component 对应组件
简单路由完整代码
import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
// 导入子组件
class App extends Component {
render() {
return (
<div className="App" >
<Router>
<div> <Link to="/">首页</Link> | <Link to="/about">关于</Link> </div>
<hr/>
<Route path="/" exact component={Home}></Route>
<Route path="/about" component={About}></Route>
</Router>
</div>
);
}
}
function Home(){
return (<h1>我是首页</h1>);
}
function About(){
return (<h1>我是关于</h1>);
}
export default App;
路由的参数
01 定义指令 Link指令
<Link to="/produce/1">产品1</Link> |
<Link to="/produce/abc">产品abc</Link></div>
02 定义路由
<Route path="/produce/:id" component={Produce}></Route>
03 定义组件-获取路由参数
function Produce({match}){
return (<h1>我是产品:{match.params.id}</h1>);
}
match 是组件默认传递的参数， match.paras 组件路由参数对象
出来match对象 还有 history对象和location对象
子路由
我们这里用Navlink 讲解它比link 选中的时候多个一个 active 的class
导入Navlink
import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom'
01 定义指令 Link指令
<NavLink to="/detail">详情</NavLink>
02 定义主路由
<Route path="/detail" component={Detail}></Route>
03 编写主路由
function Detail({location,match}){
return (
<div>
<div><NavLink to={match.url+'/arg'}>参数</NavLink> | <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
<hr/>
<Route path={match.url+'/arg'} component={Arg}></Route>
<Route path={match.url+'/com'} component={Com}></Route>
</div>);
}
match.url 获取当前匹配的主路由地址
04 编写子路由
function Arg(){
return (<h1>我是Arg </h1>);
}
function Com(){
return (<h1>我是com</h1>);
}
路由404配置 与Switch
Switch能让匹配的路由唯一
01 导入Switch
import {BrowserRouter as Router,Route,Link,Switch,NavLink,Redirect} from 'react-router-dom'
02 定义路由
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/produce/:id" component={Produce}></Route>
<Route path="/detail" component={Detail}></Route>
<Route component={NoMatch}></Route>
</Switch>
定义404路由要写到最后
03 编写404路由
function NoMatch({location}){
return (<h1>页面没有找到{location.pathname}</h1>);
}
location 当前的地址
pathname 当了地址信息
重定向
我们需要写一个默认的子路由，这个时候可用重定向
01 导入重定向
import {
BrowserRouter as Router,
Route,
Link,
Switch,
NavLink,
Redirect
} from 'react-router-dom'
重新编写 主路由
function Detail({location,match}){
return (<div>
<div><NavLink to={match.url+'/arg'}>参数</NavLink> | <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
<hr/>
<Switch>
<Route path={match.url+'/arg'} component={Arg}></Route>
<Route path={match.url+'/com'} component={Com}></Route>
<Redirect from={match.url} to={match.url+'/arg'}/>
</Switch>
</div>);
}
from 是可以省略的
完整代码
import React, { Component } from 'react';
import Child from './components/Child'
import {BrowserRouter as Router,Route,Link,Switch,NavLink,Redirect} from 'react-router-dom'
// 导入子组件
class App extends Component {
render() {
return (
<div className="App" >
<Router>
<div>
<NavLink to="/" exact>首页</NavLink> |
<NavLink to="/about">关于</NavLink> |
<NavLink to="/produce/1">产品1</NavLink> |
<NavLink to="/produce/abc">产品abc</NavLink></div>|
<NavLink to="/detail">详情</NavLink>
<hr/>
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/produce/:id" component={Produce}></Route>
<Route path="/detail" component={Detail}></Route>
<Route component={NoMatch}></Route>
</Switch>
</Router>
</div>
);
}
}
function Home(){
return (<h1>我是首页</h1>);
}
function About({history}){
return (<h1>我是关于 <button onClick={()=>{history.go(-1)}}>返回</button> <button onClick={()=>{history.push("/")}}>首页</button> </h1>);
}
function Produce({match}){
return (<h1>我是产品:{match.params.id}</h1>);
}
function NoMatch({location}){
return (<h1>页面没有找到{location.pathname}</h1>);
}
function Detail({location,match}){
return (<div>
<div><NavLink to={match.url+'/arg'}>参数</NavLink> | <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
<hr/>
<Switch>
<Route path={match.url+'/arg'} component={Arg}></Route>
<Route path={match.url+'/com'} component={Com}></Route>
<Redirect from={match.url} to={match.url+'/arg'}/>
</Switch>
</div>);
}
function Arg(){
return (<h1>我是Arg </h1>);
}
function Com(){
return (<h1>我是com</h1>);
}
export default App;
组件的参数
function About({match,history,location}){
console.log(match,history,location)
return (<h1>我是about</h1>);
}
match 匹配的当前路由
isExact: true ,//是否精确匹配
params:{}// 当前路由的参数
path:{} //路由指定的path
url：{}// link 指定的链接地址
history当前路由信息
go() 历史记录跳转
goBack() 历史记录返回
goFoward() 前进
length 历史记录的长度
push() 跳转 有历史记录
replace() 跳转没有历史记录
location 地址信息
---hash #后面的参数
---pathname 当前路由的地址
---search 问号后面的参数
location 同history的location 当前地址信息
class 编程 js路由跳转
history.push('/login');
