1、react中路由
react路由存在两种，一种是react-router，另外是react-router-dom，区别的话则是看是否能通过dom去控制路由。
-
react-router提供了一些router的核心api，例如：Router，Route，Switch等，但是它没有提供dom操作进行跳转的api。 -
React-router-dom提供了BrowserRouter，Route，Link等api，动态的，可以去使用dom的事件去控制路由
2、BrowerserRouter路由和HashRouter路由
两者都是路由的基本，都是进行路由地址的分发，HashRouter是通过hash值来对路由进行控制的，如果使用的是hash模式的话，你的路由则会默认存在一个#号。
BrowerserRouter的原理是使用HTML5 history API来使内容随着url动态的去改变。
3、Route的作用
Route主要的作用就是去控制路径对应显示的组件，默认的是模糊匹配的，比如一般首页的路径/以及其他的url地址/user，都是会被匹配到的，因此，它也提供了一些标签属性用于解决这类问题。
-
exact：精准匹配，控制匹配到
/路径时会不再继续向下匹配 -
path：标识路由的路径，
/path/:id路由参数 - component：表示路径对应显示的组件
4、路由跳转的Link和NavLink的区别
二者都是可以控制路由跳转的，标签中含有to属性，后面接着的可以是string类型或者object，来控制url的跳转，二者不同的再于NavLink它可以为当前选中的路由设置类名、样式以及回调函数等。
代码示例：
import React, { Component } from 'react';
import {
NavLink,
Route,
BrowserRouter as Router
} from 'react-router-dom'
export default class ReactRouter extends Component {
render() {
return (
<>
<Router>
<NavLink to={'/'}>首页</NavLink>
<NavLink to={'/news'}>新闻</NavLink>
<NavLink to={'/play'}>娱乐</NavLink>
<NavLink to={'/hot'}>热门</NavLink>
<Route exact path={'/'} render={(props)=>{
console.log(props);
return <h1>首页</h1>
}
}/>
<Route exact path={'/news'} render={(props)=>{
console.log(props);
return <h1>新闻</h1>
}
}/>
<Route exact path={'/play'} render={(props)=>{
console.log(props);
return <h1>娱乐</h1>
}
}/>
<Route exact path={'/hot'} render={(props)=>{
console.log(props);
return <h1>热门</h1>
}
}/>
</Router>
</>
)
}
}
编译结果.png
5、路由重定向Redirect
路由的重定义广泛的用途一是登录页进去后页面的重定向定位以及错误URL跳转到的403页面。
from = "*" to="/"
6、Switch切换路由
Switch会包裹Route，它里面不能放其他的html元素，只能用来显示一个路由，主要作用体现在匹配路由时只会从上往下匹配对应的一个路由。
7、params与query
-
this.props.match来获取路由(/news/list123)参数 - 可以通过
node-url来获取路由(/news/list?id=123&a=456&b=789)参数
代码示例
<Router>
<NavLink exact to={'/'}> 首页</NavLink>
<NavLink to={'/news'}>新闻</NavLink>
<NavLink to={{ pathname: '/play', search: '?uid=1001' }}>开发者</NavLink>
<NavLink to={{ pathname: '/hot', query: { uid: '2301' } }}>客户</NavLink>
<Route exact path={'/'} render={(props) => {
console.log(props);
return <h1>首页</h1>
}
} />
<Route exact path={'/news'} render={(props) => {
console.log(props);
return <h1>新闻</h1>
}
} />
<Route exact path={'/play'} render={(props) => {
console.log(props);
return <h1>开发者</h1>
}
} />
<Route exact path={'/hot'} render={(props) => {
console.log(props);
return <h1>客户</h1>
}
} />
</Router>
编译结果.png
编译结果.png
5、Switch的使用
Switch中，执行机制是从上往下的，因此在匹配路由的过程中是会从上往下去筛选，当用户在地址栏上输入的url地址与代码中的路由是相匹配的，那么就会跳转到相应的页面，如果输入错误的url，则会展示底部的*匹配所有路由的404页面。
import React, { Component } from 'react';
import {
NavLink,
Route,
BrowserRouter as Router,
Switch
} from 'react-router-dom'
export default class ReactRouter extends Component {
render() {
return (
<>
<Router>
<NavLink exact to={'/'}> 首页</NavLink>
<NavLink to={'/news'}>新闻</NavLink>
<NavLink to={{ pathname: '/play', search: '?uid=1001' }}>开发者</NavLink>
<NavLink to={{ pathname: '/hot', query: { uid: '2301' } }}>客户</NavLink>
<Switch>
<Route exact path={'/'} render={(props) => {
console.log(props);
return <h1>首页</h1>
}
} />
<Route exact path={'/news'} render={(props) => {
console.log(props);
return <h1>新闻</h1>
}
} />
<Route exact path={'/play'} render={(props) => {
console.log(props);
return <h1>开发者</h1>
}
} />
<Route exact path={'/hot'} render={(props) => {
console.log(props);
return <h1>客户</h1>
}
} />
{/* 404页面处理方式 */}
<Route path={'*'} render={(props) => {
console.log(props);
return <h1>404，页面不存在!</h1>
}
} />
</Switch>
</Router>
</>
)
}
}
编译结果.png
