react-router-dom文档
前言
本来体验下react-router的，然后
去react-router npm查看，发现了官方的提示如下:
这个包为 React Router 提供了核心路由功能，但你可能不想直接安装它。如果您正在编写将在浏览器中运行的应用程序，您应该安装 react-router-dom。同样，如果您正在编写 React Native 应用程序，则应该安装 react-router-native。这两个都将安装 react-router 作为依赖项
也就是说如果想在react项目中添加路由功能，应该使用react-router-dom而不是react-router,直接使用最新版的react-router可能会报错
既然官方使用react-router-dom替代了react-router，那我们就学习一下怎么使用react-router-dom实现路由功能吧
快速开始
要在 Web 应用程序中开始使用 React Router，您需要一个 React Web 应用程序。如果您需要创建一个，我们建议您尝试Create React App。这是一个流行的工具，与 React Router 配合得非常好。首先，安装 create-react-app 并用它创建一个新项目
npx create-react-app demo-app
cd demo-app安装
您可以使用 npm 或 yarn 安装 React Router。由于我们正在构建一个 Web 应用程序，因此我们将在本指南中使用 react-router-dom
npm install react-router-dom
npm run start接下来，将以下任一示例复制/粘贴到 src/App.js。
第一个例子：基本路由
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
{/* 标签会渲染将匹配URL的第一个进行渲染，如果最前面的匹配了，
后面的就不会渲染，所以对于path="/"的应该放在最后面，相当于js里的switch */}
);
}
function Home() {
return Home
;
}
function About() {
return About
;
}
function Users() {
return Users
;
}在这个例子中，我们有 3 个由路由器处理的“页面”：一个主页、一个关于页面和一个用户页面。当您在不同的 上点击时，路由器会渲染匹配的
注意：在组件内部， 会渲染带有真实 href 的 标签，因此人们使用键盘进行导航或屏幕阅读器仍然可以使用这个应用程序。
第二个例子：嵌套式路由
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
export default function App() {
return (
-
Home
-
About
-
Topics
);
}
function Home() {
return Home
;
}
function About() {
return About
;
}
function Topics() {
let match = useRouteMatch();
return (
Topics
-
Components
-
Props v. State
{/* match.path和match.url一直都是"/topics"没变过，所以嵌套路由无非就是
在里又渲染了一个，子需要拼接一下父的路径match.path
*/}
Please select a topic.
);
}
function Topic() {
let { topicId } = useParams();
return Requested topic ID: {topicId}
;
}此示例显示嵌套路由的工作原理。路由 /topics 加载 Topics 组件，该组件根据路径 :id 值有条件地渲染任何进一步的
继续前进
希望这些示例能让您了解使用 React Router 创建 Web 应用程序是什么感觉。继续阅读以了解有关 React Router 中主要组件的更多信息！
主要组件
React Router 中的组件主要分为三类：
路由器，例如
路由匹配器，例如
和导航，例如 、
我们也喜欢将导航组件视为“路由更改器”。您在 Web 应用程序中使用的所有组件都应该从 react-router-dom 导入。
路由器Routers
每个 React Router 应用程序的核心应该是一个路由器组件。对于 web 项目，react-router-dom 提供了
要使用路由器，只需确保它在元素层次结构的根部渲染。通常，您会将顶级
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
function App() {
return Hello React Router
;
}
ReactDOM.render(
,
document.getElementById("root")
);
路由匹配器
有两个路由匹配组件：Switch 和Route。当
匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
function App() {
return (
{/* 如果当前URL为/about，则渲染此
其余的都被忽略了 */}
{/* 注意这两个是如何排列的。更具体的
path=“/contact/：id”位于path=“/contact”之前，因此
查看单个联系人时将渲染当前 */}
{/* 注意/contact会匹配当前，而不是上一个*/}
{/* 如果之前的任何路径都不渲染任何内容，
这条路径起到了退路的作用。
重要提示：路径为“/”的路由将始终匹配
URL，因为所有URL都以/开头。那就是
为什么我们把这个放在最后,可以当404页面 */}
);
}
ReactDOM.render(
,
document.getElementById("root")
);需要注意的一件重要事情是
注意：虽然 React Router 确实支持在
导航（或路由转换器）
React Router 提供了一个 组件来在你的应用程序中创建链接。无论您在何处渲染 ，都将在您的 HTML 文档中呈现一个锚点 ()。
Home
// Home
React
// 当URL是/react, 它渲染的是:
// React
// 否则:
// React
任何时候你想强制导航，你都可以渲染一个
钩子函数
React Router 附带了一些钩子，可让您访问路由器的状态并从组件内部执行导航。
请注意：您需要使用 React >= 16.8 才能使用这些钩子中的任何一个, 并且这四个钩子函数只能在
useHistory
useLocation
useParams
useRouteMatch
useHistory
useHistory 钩子函数会返回一个history实例，通过这个实例你可以进行跳转操作
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
);
}useLocation
useLocation钩子函数会返回一个location对象，location对象里有当前路径信息，你可以把useLocation想象成useState，当路由改变的时候useLocation都会返回一个最新的地址对象
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
useLocation
} from "react-router-dom";
function usePageViews() {
let location = useLocation();
React.useEffect(() => {
alert(location.pathname);
}, [location]);
}
function App() {
usePageViews();
return ... ;
}
ReactDOM.render(
,
node
);useParams
useParams会返回URL参数的键/值对象，使用它来访问当前
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route,
useParams
} from "react-router-dom";
function BlogPost() {
let { slug } = useParams();
return Now showing post {slug};
}
ReactDOM.render(
,
node
);useRouteMatch
useRouteMatch 钩子尝试以与
旧的写法:
import { Route } from "react-router-dom";
function BlogPost() {
return (
{
// Do whatever you want with the match...
return ;
}}
/>
);
}
使用useRouteMatch的写法:
import { useRouteMatch } from "react-router-dom";
function BlogPost() {
let match = useRouteMatch("/blog/:slug");
// Do whatever you want with the match...
return ;
} 并且:
如果不传任何参数useRouteMatch会返回当前
或者接受一个参数，它与 matchPath 的 props 参数相同。它可以是字符串形式的路径名（如上面的示例），也可以是具有 Route 接受的匹配道具的对象，如下所示，这个时候如果匹配到了，会返回一个匹配对象，否则会返回null
const match = useRouteMatch({
path: "/BLOG/:slug/",
strict: true,
sensitive: true
});useRouteMatch可用于条件渲染
参考文档:
《react-router官网》