react-router-dom简介
react-router-dom
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把多个路由组合在⼀起。
对于⼀个<Route>组件，可以设置三种属性：component、render、children来渲染出对应的内容。
当组件已存在时，⼀般使⽤component属性当需要传递参数变量给组件时，需要使⽤render属性
2.3 导航组件
有三种常⽤的导航组件，分别是:<Link>、<NavLink>、<Redirect>。<NavLink>是⼀种特殊的Link组件，匹配路径时，渲染的a标签带有active。
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 (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/person">Person</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and renders the first one that matches the current URL. */} <Switch>
<Route path="/about">
<About />
</Route>
<Route path="/person">
<Person />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
)
;
}
export default App;
当然此处路由也可以有其他写法,⽐如
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/person/:id" component={Person}></Route> <Route component={NotFind}></Route>
</Switch>
其中的exact表⽰的是精确匹配，⽐如上⾯
<Route exact path="/" component={Home}></Route>
如果没有写精确匹配的化，那么后⾯的所有路径都可以匹配到⾸页，解决⽅式就是增加exact或者将此路由放置最后⾯。
3.2 Route动态传参
在⼀个路由匹配组件上设置参数，⽐如说上⾯的Person组件
<Route path="/person/:id" component={Person}></Route>
设置是以：开始然后紧跟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 (
<div>
<h2>个⼈中⼼页⾯</h2>
<p>个⼈id是:{id}</p>
</div>
)
}
}
以上为传统class组件的写法，现在可以使⽤hooks，可以使⽤useParams，代码如下：
import React from 'react';
import { useParams } from 'react-router-dom'
const Person = () => {
const { id } = useParams();
return (
<div>
<h2>个⼈中⼼页⾯</h2>
<p>个⼈id是:{id}</p>
</div>
)
}
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 (
<>
<nav>
<Link to={`${match.url}/tshirt`}>Tshirt</Link>|
<Link to={`${match.url}/jeans`}>Jeans</Link>
</nav>
<Switch>
<Route path={`${match.path}/tshirt`} component={Tshirt}></Route>
<Route path={`${match.path}/jeans`} exact component={Jeans}></Route>
</Switch>
</>
)
}
}
此处如果换成Function的话可以直接使⽤另⼀个钩⼦函数useRouteMatch，获取当前匹配的路径和路由
import { useRouteMatch } from 'react-router-dom'
const About = () => {
const { path, url } = useRouteMatch();
...省略
}
3.4 路由重定向
Redirect路由重定向，使路由重定向到某个页⾯，⽐如我们经常会做的没有登录重定向到登录页⾯
<Route exact path="/">
{loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}</Route>
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 (
<Router>
<ScrollToTop />
<App />
</Router>
);}
⽽对于某些情况下⽐如⼀些tab我们希望切换回我们浏览过的tab页时我们希望滚动条滚动到我们之前浏览的位置，此处⾃⾏去实现。
react native 3.6 路由守卫
有时候我们在某个表单页⾯填好了表单，然后点击跳转到另外⼀个页⾯。
这时候我们就需要提醒⽤户有未提交的表单。当然这⼀步其实也是在实际的业务代码中实现。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论