路由是构建现代 web 应用程序的关键部分。 react router 是一个功能强大的库，可让您有效地处理 react 应用程序中的路由。本指南将帮助您了解 react router 的基础知识，包括设置它、使用基本组件以及探索高级路由技术，例如嵌套路由、动态路由、路由参数和路由防护。
react 路由器简介
react router 支持 react 应用程序中不同组件之间的导航，允许您创建具有多个视图的单页应用程序 (spa)。
设置 react 路由器
要开始使用 react router，您需要将其安装到您的项目中。您可以使用 npm 或yarn 来完成此操作。
npm install react-router-dom
或
yarn add react-router-dom
路由、交换机、链接和 navlink 组件
react router 提供了几个组件来定义路由和处理导航。
路线组件
route 组件用于在应用程序中定义路由。它指定了路径以及路径匹配时应该渲染的组件。
示例：
import react from 'react';
import { browserrouter as router, route } from 'react-router-dom';
import home from './home';
import about from './about';
const app = () => {
return (
<router><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route></router>
);
};
export default app;
本例中，路径为 / 时渲染 home 组件，路径为 /about 时渲染 about 组件。
开关元件
switch 组件确保一次只渲染一条路线。它渲染与当前 url 匹配的第一个 route。
示例：
import react from 'react';
import { browserrouter as router, route, switch } from 'react-router-dom';
import home from './home';
import about from './about';
import notfound from './notfound';
const app = () => {
return (
<router><switch><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route><route component="{notfound}"></route></switch></router>
);
};
export default app;
在此示例中，如果没有路由匹配，则渲染 notfound 组件。
链接组件
link 组件在您的应用程序中创建导航链接，类似于锚点（）标签，但无需重新加载页面。
示例：
import react from 'react';
import { browserrouter as router, route, link } from 'react-router-dom';
import home from './home';
import about from './about';
const app = () => {
return (
<router><nav><link to="/">home
<link to="/about">about
</nav><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route></router>
);
};
export default app;
在此示例中，单击链接即可导航到相应的路线，而无需重新加载页面。
导航链接组件
navlink 组件与 link 组件类似，但提供了基于活动路线的附加样式功能。
示例：
import react from 'react';
import { browserrouter as router, route, navlink } from 'react-router-dom';
import home from './home';
import about from './about';
const app = () => {
return (
<router><nav><navlink exact to="/" activeclassname="active">
home
</navlink><navlink to="/about" activeclassname="active">
about
</navlink></nav><route path="/" exact component="{home}"></route><route path="/about" component="{about}"></route></router>
);
};
export default app;
在此示例中，activeclassname 属性将活动类应用于与当前路由匹配的链接。
先进的路由技术
嵌套路由
嵌套路线允许您在其他路线中创建路线，对于创建具有子导航的布局很有用。
示例：
import react from 'react';
import { browserrouter as router, route, switch, link, useroutematch } from 'react-router-dom';
const topic = ({ match }) => <h3>requested topic id: {match.params.topicid}</h3>;
const topics = () => {
let { path, url } = useroutematch();
return (
<div>
<h2>topics</h2>
<ul>
<li>
<link to="{`${url}/components`}">components
</li>
<li>
<link to="{`${url}/props-v-state`}">props v. state
</li>
</ul>
<switch><route exact path="{path}"><h3>please select a topic.</h3>
</route><route path="{`${path}/:topicid`}" component="{topic}"></route></switch>
</div>
);
};
const app = () => (
<router><div>
<ul>
<li>
<link to="/">home
</li>
<li>
<link to="/topics">topics
</li>
</ul>
<switch><route exact path="/"><h2>home</h2>
</route><route path="/topics" component="{topics}"></route></switch>
</div>
</router>
);
export default app;
在此示例中，主题组件包含嵌套路由，允许主题部分内的子导航系统。
动态路由
动态路由允许您基于动态参数创建路由，例如用户 id 或产品 id。
示例：
import react from 'react';
import { browserrouter as router, route, switch, link } from 'react-router-dom';
const user = ({ match }) => <h3>user id: {match.params.userid}</h3>;
const app = () => (
<router><div>
<ul>
<li>
<link to="/user/1">user 1
</li>
<li>
<link to="/user/2">user 2
</li>
</ul>
<switch><route path="/user/:userid" component="{user}"></route></switch>
</div>
</router>
);
export default app;
在此示例中，用户组件使用作为路由参数传递的用户 id 进行渲染。
路由参数
路由参数允许您从 url 捕获值并在组件中使用它们。
示例：
import react from 'react';
import { browserrouter as router, route, switch, link } from 'react-router-dom';
const product = ({ match }) => <h3>product id: {match.params.productid}</h3>;
const app = () => (
<router><div>
<ul>
<li>
<link to="/product/101">product 101
</li>
<li>
<link to="/product/202">product 202
</li>
</ul>
<switch><route path="/product/:productid" component="{product}"></route></switch>
</div>
</router>
);
export default app;
在本例中，product组件使用productid路由参数来显示产品id。
路由守卫和重定向
路由防护和重定向可帮助您根据条件（例如用户身份验证）控制对某些路由的访问。
保护路线
为了保护路由，您可以创建一个高阶组件（hoc），在渲染组件之前检查条件（例如，用户身份验证）。
示例：
import react from 'react';
import { browserrouter as router, route, redirect } from 'react-router-dom';
const isauthenticated = false;
const privateroute = ({ component: component, ...rest }) => (
<route render="{(props)">
isauthenticated ? <component></component> : <redirect to="/login"></redirect>
}
/>
);
const dashboard = () => <h3>dashboard</h3>;
const login = () => <h3>login</h3>;
const app = () => (
<router><div>
<privateroute path="/dashboard" component="{dashboard}"></privateroute><route path="/login" component="{login}"></route>
</div>
</router>
);
export default app;
</route>
在此示例中，privateroute 组件在渲染 dashboard 组件之前检查用户是否经过身份验证。如果用户未通过身份验证，他们将被重定向到登录组件。
在 react router 中实现重定向
可以使用重定向组件来实现重定向，以编程方式将用户导航到不同的路线。
示例：
import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
const OldPage = () => <h3>Old Page (will redirect)</h3>;
const NewPage = () => <h3>New Page</h3>;
const App = () => (
<router><switch><route path="/old-page
"><redirect to="/new-page"></redirect></route><route path="/new-page" component="{NewPage}"></route></switch></router>
);
export default App;
在此示例中，访问 /old-page 将自动将用户重定向到 /new-page。
结论
理解和使用 react router 实现路由对于构建健壮的 react 应用程序至关重要。通过掌握设置路由、使用 link 和 navlink 处理导航的基础知识，以及实现嵌套路由、动态路由、路由参数和路由防护等高级技术，您可以在应用程序中创建无缝且安全的导航体验。随着您继续发展您的技能，这些概念将成为您使用 react 构建复杂的单页应用程序的能力的基础。
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » 初级：使用 React Router 进行路由
