react-router-dom
官网：https://reactrouter.com/web/guides/quick-start
一、安装
cnpm i react-router-dom -S
二、引入
hash模式
// 使用<Router>包裹组件
import { HashRouter as Router } from 'react-router-dom';
// 或使用<HashRouter>包裹组件
import { HashRouter } from 'react-router-dom';
history模式
// 使用<Router>包裹组件
import { BrowserRouter as Router } from 'react-router-dom';
// 或使用<BrowserRouter >包裹组件
import { BrowserRouter } from 'react-router-dom';
三、Link组件
Link跳转，to属性：跳转路径，可以是string、object、funcrion
// 使用<Router>包裹组件
import { HashRouter as Router, Link, Route, NavLink } from 'react-router-dom';
class FatherCom extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
{/* 外层必须用Router包裹，basename：基准路由，自动拼接Link指定路径 */}
<Router basename="/admin">
公共显示部分
{/* Link跳转 */}
{/* to:string,跳转至对应路由：/admin/page1/123?sort=name,添加replace属性即为进行的replace跳转 */}
<Link to="/page1/123?sort=name" replace>toPage1</Link>
{/* to:object,跳转至pathname，同时可以携带参数：/admin/page1?sort=name#the-hash */}
<Link to={{
pathname: '/page2',
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}>toPage2</Link>
{/* to:function，跳转至：/admin/page3?sort=name,当前路由改变参数：location => `${location.pathname}?sort=name` */}
<Link to={() => '/page3?sort=name'}>toPage3</Link>
</Router>
</div>
)
}
}
四、Route组件
当path属性和当前URL匹配时，渲染对于组件
Route组件的三种渲染方式：component、render、children
其中children中的函数无论是否匹配都会执行，接收参数match，如果不匹配返回null
component、render、children能够同时存在，权重component>render>children
import { HashRouter as Router, Link, Route, NavLink } from 'react-router-dom';
function Page1() {
return (
<div>这里是page1</div>
)
}
function Page3() {
return (
<div>这里是page3</div>
)
}
class FatherCom extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Router basename="/admin">
公共显示部分
{/* Link跳转 */}
<Link to="/page1/123?sort=name" replace>toPage1</Link>
<Link to={{
pathname: '/page2',
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}>toPage2</Link>
<Link to={() => '/page3?sort=name'}>toPage3</Link>
{/* Route渲染 */}
<Route path="/page1/:id" component={(data) => {
console.log(data) // 可接收URL参数
return (<Page1 />)
}}></Route>
<Route path="/page2" render={() => <div>这里是page2</div>}></Route>
<Route path="/page3" children={({match}) => {
console.log(match)
return (<Page3 />)
}}></Route>
</Router>
</div>
)
}
}
四、NavLink组件
常用属性：
1.activeStyle：该元素活动状态时的样式
2.activeClassName：该元素活动状态时的类名
3.isActive：无论是否匹配URL都会执行，接收match为null为不匹配
import { HashRouter as Router, Link, Route, NavLink } from 'react-router-dom';
class FatherCom extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Router basename="/admin">
{/* NavLink是Link的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数 */}
<NavLink exact strict
to={() => '/page1?sort=name'}
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
isActive={(match, location) => {
if (!match) {
return false;
}
console.log(match) // match为null时和当前URL不匹配
}}
>toPage1</NavLink>
<Route path="/page1" component={(props) => {
console.log(props) // 可接收URL参数
return (<div>这里是page1</div>)
}}></Route>
</Router>
</div>
)
}
}
五、Redirect组件
重定向，不符合条件时改变跳转跳转路由
Redirect from属性是地址与from匹配（可以用正则），才会重定向到to属性指定的路径
Redirect from属性如果没有，则默认是匹配所有的路径
import { HashRouter as Router, Redirect, Route, NavLink } from 'react-router-dom';
class FatherCom extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Router basename="/admin">
<NavLink exact strict
to={() => '/page1/123'}
>toPage1</NavLink>
<Route path="/page1/:id" component={(props) => {
return props.match.params?.id?<div>详情页</div>:<Redirect to="/login" />
}}></Route>
</Router>
</div>
)
}
}
六、Switch组件
Switch 是Route 从上到下匹配，如果有一个匹配，后面的就不会再继续匹配了
import { HashRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
class FatherCom extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Router>
<Switch>
<Route exact path="/">
主页
</Route>
<Route path="/detail">
详情
</Route>
<Redirect from="/other" to="/login" />
<Route path="/login">
登录
</Route>
</Switch>
</Router>
</div>
)
}
}
