Reactrouter5.x使用总结

5. 导航组件: Link 和 NavLink

Link 和 NavLink 都可以用来指定路由跳转，NavLink 的可选参数更多。

Link

两种配置方式：

通过字符串执行跳转路由


登录


通过对象指定跳转路由

• pathname: 表示要链接到的路径的字符串。


• search: 表示查询参数的字符串形式。


• hash: 放入网址的 hash，例如 #a-hash。


• state: 状态持续到 location。通常用于隐式传参（埋点），可以用来统计页面来源

pathname: '/login',
search: '?name=cedric',
hash: '#someHash',
state: { fromWechat: true }
}}>
登录


点击链接 进入 Login 页面后，就可以在this.props.location.state中看到 fromWechat: true:

NavLink

可以看做 一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。


登录


to="/login"
activebold',
color: 'red'
}}
>
登录


• exact: 如果为 true，则仅在位置完全匹配时才应用 active 的类/样式。


• strict: 当为 true，要考虑位置是否匹配当前的URL时，pathname 尾部的斜线要考虑在内。


• location 接收一个location对象，当url满足这个对象的条件才会跳转


• isActive: 接收一个回调函数，只有当 active 状态变化时才能触发，如果返回false则跳转失败

const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
to="/login"
isActive={oddEvent}
>login

6. Redirect

将导航到一个新的地址。即重定向。

上面，当访问路由‘/’时，会直接重定向到‘/home’。

常在用户是否登录：

class Center extends PureComponent {
render() {
const { loginStatus } = this.props;
if (loginStatus) {
return (


也可使用对象形式：

to={{
pathname: "/login",
search: "?utm=your+face",
state: { referrer: currentLocation }
}}
/>

 7. withRouter

withRouter 可以将一个非路由组件包裹为路由组件，使这个非路由组件也能访问到当前路由的match, location, history对象。

import { withRouter } from 'react-router-dom';
class Detail extends Component {
render() {
··· ···
}
}

const mapStateToProps = (state) => {
return {
··· ···
}
}
const mapDispatchToProps = (dispatch) => {
return {
··· ···
}
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));

8. 编程式导航 - history 对象

例如，点击img进入登录页：

class Home extends PureComponent {
goHome = () => {
console.log(this.props);

this.props.history.push({
pathname: '/login',
state: {
identityId: 1
}
})
}
render() {
return (

)
}
}

 history 对象通常会具有以下属性和方法：

• length - (number 类型) history 堆栈的条目数


• action - (string 类型) 当前的操作(PUSH, REPLACE, POP)


• location - (object 类型) 当前的位置。location 会具有以下属性：


• pathname - (string 类型) URL 路径


• search - (string 类型) URL 中的查询字符串


• hash - (string 类型) URL 的哈希片段


• state - (object 类型) 提供给例如使用 push(path, state) 操作将 location 放入堆栈时的特定 location 状态。只在浏览器和内存历史中可用。


• push(path, [state]) - (function 类型) 在 history 堆栈添加一个新条目


• replace(path, [state]) - (function 类型) 替换在 history 堆栈中的当前条目


• go(n) - (function 类型) 将 history 堆栈中的指针调整 n


• goBack() - (function 类型) 等同于 go(-1)


• goForward() - (function 类型) 等同于 go(1)


• block(prompt) - (function 类型) 阻止跳转。 

注意，只有通过 Route 组件渲染的组件，才能在 this.props 上找到 history 对象

所以，如果想在路由组件的子组件中使用 history ，需要使用 withRouter 包裹:

import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';
class 子组件 extends PureComponent {
goHome = () => {
this.props.history.push('/home')
}
render() {
console.log(this.props)
return (


9. 路由过渡动画

import { TransitionGroup, CSSTransition } from "react-transition-group";
class App extends Component {
render() {
return (


.fade-enter {
opacity: 0;
z-index: 1;
}
.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}

10. 打包部署的路由配置

项目执行npm run build后，将打包后的build文件当大 Nginx 配置中。

如果 react-router 路由 使用了 history 模式（即），那么在 Nginx 配置中必须加上:

location / {
··· ···
try_files $uri /index.html;
··· ···
}
}

如果 react-router 路由 使用了 hash 模式(即)，那么在 Nginx 中不需要上面的配置。