react-router
一、react-router是什么
react-router是一个用于管理React应用程序中路由的库。路由是指确定应用程序如何根据URL路径来渲染不同的组件和页面。使用react-router可以将应用程序的不同页面映射到不同的URL路径，以及在用户导航时动态地加载适当的组件。这样，用户在浏览应用程序时可以通过URL直接访问不同的页面，并且可以使用浏览器的后退和前进按钮进行导航。react-router提供了路由组件、链接组件和路由控制方式等功能，使得在React应用程序中实现路由功能更加方便和灵活。
二、基本用法
React Router 是一个用于在React应用中实现路由功能的库。它可以让我们在不刷新页面的情况下，通过改变URL路径来加载不同的组件，实现单页应用（SPA）的路由功能。
下面是一个基本的示例，展示了如何使用React Router来设置路由和渲染不同的组件。
首先，安装React Router库：
npm install react-router-dom
然后，在你的React组件中导入所需的模块：
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
接下来，在你的应用中定义一些组件：
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
const Contact = () => (
<div>
<h2>Contact</h2>
</div>
);
然后，在你的渲染函数中使用 Router 组件来定义你的路由：
const App = () => (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
这个示例中，我们在 nav 元素中定义了一些链接，分别指向不同路径，然后在 Route 组件中定义了与每个路径匹配时要渲染的组件。
最后，将 App 组件渲染到你的页面中：
ReactDOM.render(<App />, document.getElementById('root'));
现在，当你点击链接时，URL路径将随之改变，同时对应组件的内容也会被渲染到页面上。举个例子，点击 "About"链接将在页面上显示 “About” 组件的内容。
三、Link，Route
1. 基本使用
在React Router中，和
组件是用于在页面中生成链接的组件。它类似于HTML中的标签，但是在React Router中，使用组件能够实现类似页面跳转效果，而不需要重新加载整个页面。通过使用组件，可以指定链接的路径，并且在点击链接时，页面会更新并显示相应的组件内容，而不会导致整个页面的刷新。例如：
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<div>
<Link to="/home">Go to Home</Link>
</div>
);
}
在上面的示例中，当点击"Go to Home"链接时，页面会导航到"/home"路径，并显示与"/home"路径匹配的组件内容。
path属性，用于指定路径，以及一个component属性，用于指定渲染的组件。当URL路径与path属性匹配时，将会渲染该component属性中指定的组件。例如：
import { Route } from 'react-router-dom';
function MyComponent() {
return (
<div>
<Route path="/home" component={Home} />
</div>
);
}
上面的示例中，当URL路径为"/home"时，将会渲染Home组件。
需要注意的是，Switch组件来包裹多个
2. exact
在react-router中，标签用于定义路由匹配规则。exact属性用于确保路由路径与当前URL完全匹配时才渲染组件。如果没有exact属性，当URL包含指定路径以及其他内容时，也会渲染对应的组件。
举个例子，假设我们有两个标签：
<Route path="/" component={Home} />
<Route path="/about" component={About} />
如果没有exact属性，当URL为"/about/contact"时，即使路径中包含了"/about"，组件也会被渲染。但是如果添加了exact属性：
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
这样，当URL为"/about/contact"时，组件不会被渲染，因为路径不完全匹配。
使用exact属性可以确保只有当URL与路径完全匹配时才渲染组件，可以避免多个路由匹配的情况发生，提高路由的准确性和匹配的效率。
3.
在React-Router中，和
-
activeClassName/activeStyle:
- 举例：
Home
-
isActive:
- 举例：
About
-
exact:
- 当设置exact={true}时，
- 举例：
Home
- 当设置exact={true}时，
综上所述，组件可以用于简单的导航链接，而
四、Switch
在React Router中，
- 只渲染与当前URL匹配的第一个
- 当遇到与URL匹配的组件后，停止渲染其他组件，避免多个路由同时被渲染。
- 如果没有与当前URL匹配的组件，可以通过
下面是
-
渲染第一个匹配的路由：
import { Switch, Route } from 'react-router-dom'; function App() { return ( <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </Switch> ); }上述代码中，可以看到
/时，只有 -
实现路由的优先级匹配：
import { Switch, Route } from 'react-router-dom'; function App() { return ( <Switch> <Route path="/users/:userId" component={User} /> <Route path="/users/new" render={() => <NewUser />} /> </Switch> ); }上述代码中，当URL为
/users/123时，只有} /> "/users/123"更精确地匹配"/users/:userId"，所以优先渲染。 -
默认路由：
import { Switch, Route } from 'react-router-dom'; function App() { return ( <Switch> <Route path="/about" component={About} /> <Route path="/" render={() => <DefaultPage />} /> </Switch> ); }上述代码中，当URL既不匹配
"/about"，也不匹配任何其他定义的路由时，只有} />
通过上述的介绍，可以看出
五、动态路由
在React Router中，动态路由匹配允许我们为一个路径创建一个带有动态参数的模板。这意味着我们可以通过设置一个通用的路径规则来匹配各种不同的URL，并将URL的一部分作为参数传递到我们的组件中。
使用动态路由匹配，我们可以轻松地创建可重用的路由组件，使我们的应用程序更灵活、模块化和可扩展。
下面是一个使用动态路由匹配的简单示例：
首先，我们需要引入React Router和所需的组件：
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import User from './User';
然后，我们可以在我们的路由配置中使用动态路由匹配：
const App = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/user/:id" component={User} />
</Switch>
</BrowserRouter>
);
}
在上面的例子中，我们定义了两个路由。第一个路由用于匹配根路径"/“，并将Home组件渲染为其对应的路由。第二个路由使用了动态路由匹配。它匹配以”/user/“开头的路径，并将剩余部分作为参数传递给User组件。例如，对于路径”/user/1"，User组件将会被渲染，并且可以通过props中的match.params来获取id参数的值。
在User组件中，我们可以使用动态参数来执行特定的操作。例如，我们可以根据不同的id从数据源中获取相应的用户信息：
const User = ({ match }) => {
const { id } = match.params;
// 根据id从数据源中获取用户信息
const user = getUser(id);
return (
<div>
<h2>User ID: {id}</h2>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
</div>
);
}
上述例子展示了如何使用React Router的动态路由匹配来根据不同的URL参数渲染相应的组件，并在组件中使用这些参数进行相关操作。通过这种方式，我们可以轻松地创建可复用的路由组件，并提高应用程序的灵活性和可扩展性。
六、useParams
React Router是一个用于构建单页面应用的库，它允许开发者根据URL的变化渲染不同的组件。useParams是React Router提供的一个自定义Hook，用于获取URL中的参数。
使用useParams可以方便地获取URL中的参数，这对于根据不同参数来展示不同内容的页面非常有用。通过使用useParams，我们可以轻松地获得路由中的动态路径参数，无需手动解析URL字符串。
下面是一个示例，演示了如何使用useParams来获取URL中的参数：
import React from 'react';
import { useParams } from 'react-router-dom';
const ProductDetail = () => {
const { id } = useParams();
return (
<div>
<h1>Product Detail</h1>
<p>Product ID: {id}</p>
</div>
);
}
export default ProductDetail;
在上述示例中，我们定义了一个ProductDetail组件。使用useParams从URL中获取到了一个参数id。在组件的渲染过程中，我们可以直接使用id变量来显示URL中的ID。
假设我们的路由配置如下：
<Route path="/products/:id" component={ProductDetail} />
当用户访问/products/123时，ProductDetail组件将被渲染，并且id参数将被设置为123。这样，我们就可以在页面上显示Product ID: 123了。
总结一下，useParams是React Router中的一个Hooks，用于获取URL中的参数。它使得我们可以方便地从URL中提取参数，并在组件中使用这些参数。这样，我们就可以根据不同的URL参数来显示不同的内容。
七、useRouteMatch
在React Router中，useRouteMatch是一个自定义Hook，它用于获取与当前URL匹配的路由信息。它返回一个包含以下属性的对象：
- path：定义在路由配置中的路径模式（字符串）。
- url：当前匹配的URL（字符串）。
path和url的区别在于，path是在路由配置中定义的路径模式，而url则是实际匹配的URL。
举例说明：
考虑以下路由配置：
<Switch>
<Route path="/users/:userId" component={UserDetails} />
<Route path="/users" component={UsersList} />
</Switch>
在用户访问/users/123时，我们可以使用useRouteMatch来获取相关信息：
import { useRouteMatch } from "react-router-dom";
function UserDetails() {
const match = useRouteMatch();
console.log(match.path); // "/users/:userId"
console.log(match.url); // "/users/123"
// ...
}
function UsersList() {
const match = useRouteMatch();
console.log(match.path); // "/users"
console.log(match.url); // "/users"
// ...
}
在UserDetails组件中，path将是路由配置中定义的/users/:userId，而url将是实际匹配的URL/users/123。而在UsersList组件中，path和url将都是/users。
举例说明
下面是一个示例来说明useRouteMatch的用法：
import React from "react";
import { BrowserRouter as Router, Route, Link, useRouteMatch } from "react-router-dom";
const Users = () => {
// 使用useRouteMatch获取匹配的路由对象
const match = useRouteMatch();
return (
<div>
<h2>Users</h2>
<ul>
<li>
<Link to={`${match.url}/john`}>John</Link>
</li>
<li>
<Link to={`${match.url}/jane`}>Jane</Link>
</li>
</ul>
{/* 渲染嵌套的路由 */}
<Route path={`${match.path}/:user`} component={User} />
</div>
);
};
const User = () => {
// 使用useRouteMatch获取匹配的路由对象
const match = useRouteMatch();
const { user } = match.params;
return <div>{`${user}'s profile`}</div>;
};
const App = () => {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
<Route path="/users" component={Users} />
</div>
</Router>
);
};
export default App;
在上面的示例中，我们创建了一个简单的用户管理系统。在Users组件中，我们通过调用useRouteMatch来获取匹配的路由对象，然后根据匹配对象的url属性来构建用户列表链接。同时，在User组件中也使用了useRouteMatch来获取匹配的路由对象，并根据匹配对象的params属性来获取当前用户的信息。
通过使用useRouteMatch钩子函数，我们可以方便地获取和处理与当前URL匹配的路由信息，从而实现更加灵活和强大的路由功能。
八、路由嵌套
在React项目中使用react-router库来管理路由，可以实现路由的嵌套。路由的嵌套是指在一个页面中嵌套另一个页面的路由，这样可以将页面划分为更小的组件，实现更好的代码组织和复用。
下面是一个使用react-router进行路由嵌套的示例：
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
// 定义两个组件
const Home = () => <h2>Home组件</h2>;
const About = () => <h2>About组件</h2>;
// 定义嵌套路由的组件
const App = () => {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
};
export default App;
在上面的示例中，我们使用了BrowserRouter组件作为根路由器，并定义了两个路由组件Home和About。在App组件中，使用Link组件来定义导航链接，其中to属性指定了链接地址。
在nav中，我们定义了两个导航链接Home和About。当点击这些链接时，会渲染对应的组件。Route组件的path属性指定了路由的路径，component属性指定了对应的组件。
上面的示例中，/路径对应了Home组件，/about路径对应了About组件。这实现了基本路由的嵌套。
如果需要更深层次的嵌套，可以在Home或About组件中继续嵌套子路由。
例如，我们可以在Home组件中添加子路由：
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<h2>Home组件</h2>
<nav>
<ul>
<li>
<Link to="/home/page1">Page 1</Link>
</li>
<li>
<Link to="/home/page2">Page 2</Link>
</li>
</ul>
</nav>
<Route path="/home/page1" component={Page1} />
<Route path="/home/page2" component={Page2} />
</div>
);
};
const Page1 = () => <h2>Page 1</h2>;
const Page2 = () => <h2>Page 2</h2>;
const App = () => {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
};
export default App;
在Home组件中，我们添加了两个子路由/home/page1和/home/page2，并在nav中添加了对应的导航链接。子路由的路径是基于父路由的，所以完整的路径是/home/page1和/home/page2。
这样，当访问/home/page1或/home/page2时，会渲染对应的子组件Page1和Page2。可以看到，我们可以无限层级地嵌套路由来构建复杂的页面结构。
总结：
React-Router提供了Route和Link组件来实现路由的嵌套。通过在一个组件的render方法中定义子路由的路径和组件，可以实现对子组件的嵌套。可以通过导航链接Link来访问对应的路由，并渲染相应的组件。这样可以实现灵活的页面组织和路由控制。
九、路由重定向
在React中，可以使用react-router来实现路由的重定向。
要实现路由的重定向，可以使用render属性。下面分别介绍这两种方式的使用方法。
-
使用
首先，需要在路由配置中设置一个特殊的路径，用于重定向。然后，在需要进行重定向的地方，添加一个to属性设置为目标路径。当用户访问特殊路径时，会自动进行重定向。例如，路由配置中设置了一个特殊路径
/home，并且设置了to属性设置为/about：import { Redirect } from 'react-router-dom'; function App() { return ( <Router> <Switch> <Route exact path="/home"> <Redirect to="/about" /> </Route> <Route path="/about"> <About /> </Route> </Switch> </Router> ); }当用户访问
/home时，会自动重定向到/about。 -
使用
render属性：
可以在render属性中编写一个回调函数，来根据特定的条件进行重定向。例如，需要根据用户登录状态来判断是否进行重定向。在
render属性中编写回调函数，根据登录状态进行判断，若未登录，则重定向到登录页面：import { Route, Redirect } from 'react-router-dom'; function App() { const loggedIn = checkIfUserIsLoggedIn(); // 假设已实现一个函数来检查登录状态 return ( <Router> <Switch> <Route exact path="/home" render={() => ( loggedIn ? ( <Home /> ) : ( <Redirect to="/login" /> ) )} /> <Route path="/login"> <Login /> </Route> </Switch> </Router> ); }当用户访问
/home时，会根据登录状态自动进行重定向。
这样，可以通过使用render属性来实现路由的重定向。根据实际需求，选择其中一种方式即可。
十、自定义link
在React Router中，可以通过封装Link组件来实现一些定制化的需求。封装Link组件可以帮助我们简化代码，提高代码复用性，并且可以根据具体业务需求进行一些特殊处理。
下面是一个简单的Link封装示例：
import React from "react";
import { Link } from "react-router-dom";
const CustomLink = ({ to, activeOnlyWhenExact, className, activeClassName, children }) => {
return (
<Link
to={to}
className={`${className} ${activeOnlyWhenExact ? activeClassName : ""}`}
>
{children}
</Link>
);
};
export default CustomLink;
在这个示例中，通过定义一个名为CustomLink的组件，组件接收了以下几个props：
- to：指定链接的目标URL。
- activeOnlyWhenExact：一个布尔值，表示只有在当前URL与目标URL完全匹配时才激活链接。
- className：指定链接的样式类。
- activeClassName：指定链接在激活状态时的样式类。
- children：链接中的内容。
在CustomLink组件中，通过使用Link组件来创建链接，并传递了适当的参数。className和activeClassName props被合并，以便在链接处于激活状态时添加activeClassName样式类。
使用CustomLink组件示例：
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import CustomLink from "./CustomLink";
const App = () => {
return (
<Router>
<div>
<CustomLink to="/" activeOnlyWhenExact={true} activeClassName="active">
Home
</CustomLink>
<CustomLink to="/about" activeClassName="active">
About
</CustomLink>
<CustomLink to="/contact" activeClassName="active">
Contact
</CustomLink>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
};
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;
export default App;
在这个示例中，我们使用了CustomLink组件来代替原始的Link组件。CustomLink组件指定了目标URL和相应的样式类。根据具体的路由匹配情况，CustomLink组件会自动添加activeClassName样式类。
这是一个简单的封装示例，你可以根据具体需求扩展CustomLink组件，并为其添加额外的功能和样式。
十一、404路由
要实现匹配到所有未找到的路由，可以使用
首先，我们需要在path属性，它将匹配所有未找到的路径。可以在这个
以下是一个示例代码：
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="*" component={NotFound} />
</Switch>
</Router>
);
};
const Home = () => {
return <h1>Home page</h1>;
};
const About = () => {
return <h1>About page</h1>;
};
const NotFound = () => {
return <h1>Page not found</h1>;
};
export default App;
在上面的示例中，/、/about，以及一个没有指定path属性的NotFound组件。
这样，当用户访问不存在的路径时，将会显示"Page not found"文本。
十二、route config
代码示例如下：
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
// 有些人认为统一的路由配置很有价值。
// 路由配置只是数据。React非常擅长将数据映射到组件中，就是其中一个组件。
// 我们的路由配置只是一组逻辑上的“路由”数组，包含了`path`和`component`属性，
// 以相同的方式进行排序，就像在``内部一样。
const routes = [
{
path: "/sandwiches",
component: Sandwiches
},
{
path: "/tacos",
component: Tacos,
routes: [
{
path: "/tacos/bus",
component: Bus
},
{
path: "/tacos/cart",
component: Cart
}
]
}
];
export default function RouteConfigExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/tacos">Tacos</Link>
</li>
<li>
<Link to="/sandwiches">Sandwiches</Link>
</li>
</ul>
<Switch>
{routes.map((route, i) => (
<RouteWithSubRoutes key={i} {...route} />
))}
</Switch>
</div>
</Router>
);
}
// 这是一个专门为的包装器，它知道如何通过将子路由传递给其渲染的组件的`routes`属性来处理“子”路由。
function RouteWithSubRoutes(route) {
return (
<Route
path={route.path}
render={props => (
// 通过传递子路由来保持嵌套
<route.component {...props} routes={route.routes} />
)}
/>
);
}
function Sandwiches() {
return <h2>Sandwiches</h2>;
}
function Tacos({ routes }) {
return (
<div>
<h2>Tacos</h2>
<ul>
<li>
<Link to="/tacos/bus">Bus</Link>
</li>
<li>
<Link to="/tacos/cart">Cart</Link>
</li>
</ul>
<Switch>
{routes.map((route, i) => (
<RouteWithSubRoutes key={i} {...route} />
))}
</Switch>
</div>
);
}
function Bus() {
return <h3>Bus</h3>;
}
function Cart() {
return <h3>Cart</h3>;
}
十三、useHistory
React Router中的useHistory是一个React Hook，它用于访问浏览器的历史记录栈，并且可以实现路由导航。
useHistory 提供了以下功能：
- 导航到不同的路由：通过调用
push方法可以将用户导航到一个新的路由。例如：
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.push('/other-route');
}
return (
<button onClick={handleClick}>Go to other route</button>
);
}
在上面的示例中，当用户点击按钮时，页面将会导航到/other-route的路径。
- 替换当前路由：通过调用
replace方法可以用一个新的路由替换当前的路由。它与push方法的区别在于，replace方法会在页面历史记录中替换当前路由，而不是在历史记录中添加一个新的条目。例如：
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.replace('/other-route');
}
return (
<button onClick={handleClick}>Replace current route</button>
);
}
在上面的示例中，当用户点击按钮时，页面将会用/other-route的路径替换当前的路由。
- 回退到前一个页面：通过调用
goBack方法可以回退到前一个页面。例如：
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleGoBack = () => {
history.goBack();
}
return (
<button onClick={handleGoBack}>Go back</button>
);
}
在上面的示例中，当用户点击按钮时，页面将会回退到前一个页面。
这些都是useHistory提供的一些常用功能，它可以帮助我们在React Router中进行路由导航操作。
十四、useLocation
在React Router中，useLocation是一个React Hook，它允许您从当前URL中获取当前位置信息。它可以用来访问URL的路径、查询参数以及状态对象。
useLocation常用属性如下:
-
pathname: 表示当前URL的路径部分，例如，对于URL “https://example.com/products”，pathname将是 “/products”。
举例:import { useLocation } from "react-router-dom"; function MyComponent() { const location = useLocation(); console.log(location.pathname); // 输出: "/products" return <div>...</div>; } -
search: 表示当前URL的查询参数部分，例如对于URL “https://example.com/products?sort=price”，search将是 “?sort=price”。
举例:import { useLocation } from "react-router-dom"; function MyComponent() { const location = useLocation(); console.log(location.search); // 输出: "?sort=price" return <div>...</div>; } -
hash: 表示当前URL的哈希部分，例如对于URL “https://example.com/#section1”，hash将是 “#section1”。
举例:import { useLocation } from "react-router-dom"; function MyComponent() { const location = useLocation(); console.log(location.hash); // 输出: "#section1" return <div>...</div>; } -
state: 表示与当前URL关联的状态对象。在路由之间传递数据时非常有用。
state属性是一个可以保存任意数据的JavaScript对象，用于在路由之间传递数据。它通常用于在路由跳转时传递一些特定的参数或状态。当从一个路由跳转到另一个路由时，可以将数据作为state传递给目标路由，然后在目标路由中使用useLocation().state来获取这些数据。
例如，假设有一个列表页面和一个详细页面，当用户点击列表中的某一项时，希望跳转到详细页面并传递该项的相关信息。可以在列表页面的路由设置中使用state属性来传递数据：
import { Link } from 'react-router-dom';
function ListPage() {
const itemList = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
];
return (
<div>
{itemList.map(item => (
<Link
key={item.id}
to={{
pathname: `/detail/${item.id}`,
state: { item } // 将item对象作为state传递给详细页面
}}
>
{item.name}
</Link>
))}
</div>
);
}
在详细页面的组件中，可以使用useLocation().state来获取传递过来的数据：
import { useLocation } from 'react-router-dom';
function DetailPage() {
const location = useLocation();
const item = location.state.item; // 获取传递过来的item对象
return (
<div>
<h3>{item.name}</h3>
<p>ID: {item.id}</p>
</div>
);
}
上述例子中，点击列表页面中的某一项会跳转到详细页面，并传递该项的相关信息（即item对象）。在详细页面中可以获取到该项的信息并展示出来。
这些属性可以帮助您根据URL的不同部分来执行不同的操作，以及在应用程序中根据路由之间的状态传递数据。
十五、withRouter
withRouter 是一个高阶组件（Higher-Order Component），它可以将包裹的组件赋予路由的功能。React 中的路由可以使用 React Router 来管理，React Router 提供了一些组件来帮助我们在应用中实现路由功能，例如 Route、Link、Switch 等。
withRouter 的作用是将路由的相关属性（如 match、location、history）注入为被包裹组件的 props，这样被包裹组件就可以直接使用这些属性，而无需通过父组件传递或使用 context API。
举个例子，假设我们有一个 Person 组件，需要根据当前访问的 URL 来显示不同的人员信息。我们可以使用 withRouter 对 Person 组件进行包裹，这样它就可以获取到路由相关的属性。
import { withRouter } from 'react-router-dom';
const Person = ({ match }) => {
const { id } = match.params;
// 根据 id 查询并显示对应的人员信息
return (
<div>
<h2>Person Details:</h2>
<p>ID: {id}</p>
{/* 其他人员信息 */}
</div>
);
}
export default withRouter(Person);
在上述例子中，我们使用 withRouter 包裹了 Person 组件，并通过解构赋值获取到了 match 对象。match 对象包含了一些路由相关的信息，如 params、url、path 等。通过 match.params.id 可以获取到当前访问 URL 中的 id 参数，然后根据该参数 进行查询或其他操作。
总之，withRouter 可以让被包裹组件拥有路由相关的属性，从而可以方便地对应用的路由进行操作。
十六、HashRouter，BrowserRouter
在React应用中，React Router是一个用于管理页面路由的库。它允许开发者在应用中创建多个页面，通过URL进行导航。React Router提供了两个主要的路由器组件：
1. ：
- 使用HTML5的history API来管理页面的URL，这意味着它可以在不刷新整个页面的情况下，实现URL的更新和页面的导航。
- 它通过从URL获取信息来渲染相应的组件。
- 在使用
举例说明：
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const App = () => {
return (
<BrowserRouter>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</div>
</BrowserRouter>
);
}
export default App;
上述例子中，使用组件用于导航到不同的URL。
2. ：
#）来管理页面的URL。- 它不需要使用服务器配置，可以直接在静态文件服务器上运行。
- 在使用
http://example.com/#/about。
举例说明：
import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom';
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const App = () => {
return (
<HashRouter>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</div>
</HashRouter>
);
}
export default App;
在上述例子中，使用#/about）将被
总结：React Router提供了两种路由器组件，