react-router-dom
react-router-dom文档地址： https://reacttraining.com/react-router/
1. 安装
react-router提供多个包可以单独使用
| package | description |
|---|---|
| react-router | 路由核心功能 |
| react-router-dom | 基于react-router提供在浏览器运行环境下功能 |
| react-router-native | for React Native |
| react-router-config | static route congif helpers |
在浏览器中运行只需要安装react-router-dom，reac-router-dom依赖react-router会自动安装依赖，所以不需要再手动安装react-router
npm install react-router-dom -S // 或者 yarn add react-router-dom
2. 路由组件
react-router包含三种类型的组件：路由组件、路由匹配组件 、导航组件。在你使用这些组件的时候，都必须先从react-router-dom引入。
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
2.1 路由组件
react-router提供了两种路由组件: BrowserRouter, HashRouter其中BrowserRouter 是基于HTML5 history API (pushState, replaceState, popstate)事件
当然与之对应的还有HashRouter是基于window.location.hash。
2.2 路由匹配组件
路由匹配组件有两种:Route和Switch,Switch把多个路由组合在一起。
对于一个component、render、children来渲染出对应的内容。
当组件已存在时，一般使用component属性当需要传递参数变量给组件时，需要使用render属性
2.3 导航组件
有三种常用的导航组件，分别是:、
3. 使用
在需要使用router的地方引入react-router-dom
3.1 基本使用
以下是路由的基本使用例子
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
// import logo from './logo.svg';
import './App.css';
import About from './views/About'
import Home from './views/Home'
import Person from './views/Person'
function App() {
return (
{/* A looks through its children s and
renders the first one that matches the current URL. */}
);
}
export default App;
当然此处路由也可以有其他写法,比如
其中的exact表示的是精确匹配，比如上面
如果没有写精确匹配的化，那么后面的所有路径都可以匹配到首页,解决方式就是增加exact或者将此路由放置最后面。
3.2 Route动态传参
在一个路由匹配组件上设置参数，比如说上面的Person组件
设置是以:开始然后紧跟key值，然后我们在Person组件中就可以通过获取props获取这个参数值
import React from 'react';
export default class Person extends React.Component {
constructor(props) {
super(props);
console.log(this.props.match.params.id)
}
render() {
const id = this.props.match.params.id
return (
个人中心页面
个人id是:{id}
)
}
}
以上为传统class组件的写法，现在可以使用hooks，可以使用useParams，代码如下：
import React from 'react';
import { useParams } from 'react-router-dom'
const Person = () => {
const { id } = useParams();
return (
个人中心页面
个人id是:{id}
)
}
3.3 嵌套路由
在About页面有一个嵌套路由代码示例：
import React from 'react';
import { Link, Switch, Route } from 'react-router-dom'
import Tshirt from './product/Tshirt';
import Jeans from './product/Jeans'
export default class About extends React.Component {
constructor(props) {
super(props)
console.log(this.props.match)
}
render() {
const match = this.props.match;
return (
<>
)
}
}
此处如果换成Function的话可以直接使用另一个钩子函数useRouteMatch，获取当前匹配的路径和路由
import { useRouteMatch } from 'react-router-dom'
const About = () => {
const { path, url } = useRouteMatch();
...省略
}
3.4 路由重定向
Redirect路由重定向，使路由重定向到某个页面，比如我们经常会做的没有登录重定向到登录页面
{loggedIn ? : }
3.5 滚动还原
大部分情况下，我们需要的是每次导航到某个新页面的的时候，滚动条都是在顶部,这种比较好实现
hooks版本
import { useEffect } from "react";import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
class版本
import React from "react";import { withRouter } from "react-router-dom";
class ScrollToTop extends React.Component {
componentDidUpdate(prevProps) {
if (
this.props.location.pathname !== prevProps.location.pathname
) {
window.scrollTo(0, 0);
}
}
render() {
return null;
}}
我们需要把ScrollToTop组件放在Router里面eg:
function App() {
return (
);}
而对于某些情况下比如一些tab我们希望切换回我们浏览过的tab页时我们希望滚动条滚动到我们之前浏览的位置，此处自行去实现。
3.6 路由守卫
有时候我们在某个表单页面填好了表单，然后点击跳转到另外一个页面。
这时候我们就需要提醒用户有未提交的表单。当然这一步其实也是在实际的业务代码中实现。
import React, { useState } from "react";
import {
Prompt
} from "react-router-dom";
const BlockingForm = ()=>{
let [isBlocking, setIsBlocking] = useState(false);
return (
);
}
export default BlockingForm;
3.7代码分割
有时候为了避免文件过大加快加载速度，我们需要将代码分割，将某些路由对应的组件只有在点击的时候再加载js，就是组件的懒加载。
我们使用webpack, @babel/plugin-syntax-dynamic-import,loadable-components实现代码分割。
首先在.babelrc文件中增加配置
{
"presets": ["@babel/preset-react"],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
在我们需要懒加载的组件使用loadabel
import React from 'react';
import loadable from '@loadable/component';
const BlockForm = loadable(() => import('../pages/BlockForm/index'), {
fallback:
其中BlockForm为懒加载得组件loadable参考文档地址 跳转
3.8 withRouter
您可以通过withRouter高阶组件访问history属性和匹配的Route,
withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.
eg:
import React from "react";import PropTypes from "prop-types";import { withRouter } from "react-router";
// A simple component that shows the pathname of the current locationclass ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
};
render() {
const { match, location, history } = this.props;
return You are now at {location.pathname};
}}
// Create a new component that is "connected" (to borrow redux// terminology) to the router.const ShowTheLocationWithRouter = withRouter(ShowTheLocation);
3.9 其他hooks
之前使用了useParams和useRouteMatch两个hook,还有另外两个hookuseHistory和useLocation
useHistory
可以访问到history实例，我们可以通过这个实例访问某个路由
useLocation
返回location对象
到此这篇关于react-router-dom简介的文章就介绍到这了,更多相关react-router-dom内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！