react-router-dom官方示例解读（中）
- 微信扫码关注公众号 ：前端前端大前端，追求更精致的阅读体验 ，一起来学习啊
- 关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程
CustomLink–自定义路由
分析
自定义路由本质是在Route组件的基础上加入了一些定制化处理，相当于包裹了一层。为了更好理解，这里对官方示例做了个微调，强匹配属性exact直接写入而不是传参形式体现。
useRouteMatch可以根据path返回一个匹配结果对象,exact表示强匹配
，借助于Route组件,useRouteMatch可以空调用,像这样useRouteMatch().反之,需要传参。可参考上一篇中的嵌套路由，对比查看。
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch
} from "react-router-dom";
const Home = () => <h2>Home</h2>
const About = () => <h2>About</h2>
export default function () {
return (
<Router>
<div>
<MyLink to="/" label="Home" />
<MyLink to="/about" label="About" />
<hr />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</div>
</Router>
);
}
function MyLink({ label, to }) {
let match = useRouteMatch({
path: to,
exact: true
})
// 这里返回的match对象仅用于样式控制
return (
<div className={match ? "active" : ""}>
{match && "> "}
<Link to={to}>{label}</Link>
</div>
);
}
PreventingTransitions–阻止过渡
分析
正常情况下，在用户在表单中填写了一些信息但是没提交的情况下，点击其他页面跳转链接，等再返回的时候，表单数据会丢失。这个例子就是提供一种阻断方式，在进行页面跳转的时候给用户一个提示，确认后会跳转，避免因为误操作导致的表单数据丢失。提示这里使用的是
Prompt组件，when属性为一个布尔值，true弹出提示框，message为具体的提示信息。Prompt也可以写在form之外，保证在要渲染的组件里即可。这种场景，通常用于长表单输入，比如注册。关于Prompt，还有个好用的点，下边单独介绍。
import React, { useState } from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Prompt
} from "react-router-dom";
// Sometimes you want to prevent the user from
// navigating away from a page. The most common
// use case is when they have entered some data
// into a form but haven't submitted it yet, and
// you don't want them to lose it.
export default function PreventingTransitionsExample() {
return (
<Router>
<ul>
<li>
<Link to="/">Form</Link>
</li>
<li>
<Link to="/one">One</Link>
</li>
<li>
<Link to="/two">Two</Link>
</li>
</ul>
<Switch>
<Route path="/" exact children={<BlockingForm />} />
<Route path="/one" children={<h3>One</h3>} />
<Route path="/two" children={<h3>Two</h3>} />
</Switch>
</Router>
);
}
function BlockingForm() {
let [isBlocking, setIsBlocking] = useState(false);
return (
<form
onSubmit={event => {
event.preventDefault();
event.target.reset();
setIsBlocking(false);
}}
>
<Prompt
when={isBlocking}
message={location =>
`Are you sure you want to go to ${location.pathname}`
}
/>
<p>
Blocking?{" "}
{isBlocking ? "Yes, click a link or the back button" : "Nope"}
</p>
<p>
<input
size="50"
placeholder="type something to block transitions"
onChange={event => {
setIsBlocking(event.target.value.length > 0);
}}
/>
</p>
<p>
<button>Submit to stop blocking</button>
</p>
</form>
);
}
Prompt
- message属性还可以接收一个函数，该函数可以获取到下一个位置（location），返回true不提示，反之，弹出提示
<Prompt
message={location =>
location.pathname.startsWith("/one")
? true
: `Are you sure you want to go to ${location.pathname}?`
}
/>
NO Match–404
分析
该示例演示的是对404的处理，用于捕获所有未匹配的项，通常放置于Switch的最后一项Route里，匹配规则为*。当然，也许你还想将所有的未捕获页面都跳转到
/error，这个需要使用重定向，后边会介绍
import React from "react";
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect,
useLocation
} from "react-router-dom";
export default function NoMatchExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/old-match">Old Match, to be redirected</Link>
</li>
<li>
<Link to="/will-match">Will Match</Link>
</li>
<li>
<Link to="/will-not-match">Will Not Match</Link>
</li>
<li>
<Link to="/also/will/not/match">Also Will Not Match</Link>
</li>
</ul>
<Switch>
<Route path="*" >
<NoMatch />
</Route>
<Route exact path="/">
<Home />
</Route>
<Route path="/old-match">
<Redirect to="/will-match" />
</Route>
<Route path="/will-match">
<WillMatch />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h3>Home</h3>;
}
function WillMatch() {
return <h3>Matched!</h3>;
}
function NoMatch() {
let location = useLocation();
return (
<div>
<h3>
No match for <code>{location.pathname}</code>
</h3>
</div>
);
}
统一处理404
代码看起来像这样，如此一来，所有的404都会统一跳转到
/error
<Switch>
<Route path="/one" component={One}/>
<Route path="/two" component={Two}/>
<Route path="/error" component={Error}/>
<Redirect from="/*" to="/error" />
</Switch>
