作为一名高级开发人员，全面了解 react 应用程序中的路由至关重要。 react router 提供了一个强大的解决方案，用于根据 url 路径管理组件的导航和渲染。本指南涵盖了 react router 的设置、基本组件以及嵌套路由、动态路由、路由参数和路由防护等高级技术。
react 路由器简介
react router 是一个强大的库，用于处理 react 应用程序中的客户端路由。它允许动态路由、嵌套路由和基于 url 路径的条件渲染。
设置 react 路由器
首先，使用npm或yarn安装react router：
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 path="/about" component={about} />
</router>
);
};
export default app;
开关元件
switch 组件确保一次只渲染一条路线，匹配第一个适合的路线。
示例：
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 path="/about" component={about} />
<route component={notfound} />
</switch>
</router>
);
};
export default app;
链接组件
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>
<link to="/about">about</link>
</nav>
<route path="/" exact component={home} />
<route path="/about" component={about} />
</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 path="/about" component={about} />
</router>
);
};
export default app;
先进的路由技术
嵌套路由
嵌套路线允许您在其他路线中创建路线，这对于具有子导航的复杂布局非常有用。
示例：
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</link>
</li>
<li>
<link to={`${url}/props-v-state`}>props v. state</link>
</li>
</ul>
<switch>
<route exact path={path}>
<h3>please select a topic.</h3>
</route>
<route path={`${path}/:topicid`} component={topic} />
</switch>
</div>
);
};
const app = () => (
<router>
<div>
<ul>
<li>
<link to="/">home</link>
</li>
<li>
<link to="/topics">topics</link>
</li>
</ul>
<switch>
<route exact path="/">
<h2>home</h2>
</route>
<route path="/topics" component={topics} />
</switch>
</div>
</router>
);
export default app;
动态路由
动态路由允许基于动态参数创建路由，对于用户配置文件或产品详细信息很有用。
示例：
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</link>
</li>
<li>
<link to="/user/2">user 2</link>
</li>
</ul>
<switch>
<route path="/user/:userid" component={user} />
</switch>
</div>
</router>
);
export default app;
路由参数
路由参数允许从 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</link>
</li>
<li>
<link to="/product/202">product 202</link>
</li>
</ul>
<switch>
<route path="/product/:productid" component={product} />
</switch>
</div>
</router>
);
export default app;
路由守卫和重定向
保护路线
路由守卫根据用户身份验证等条件限制对某些路由的访问。
示例：
import react from 'react';
import { browserrouter as router, route, redirect } from 'react-router-dom';
const isauthenticated = false;
const privateroute = ({ component: component, ...rest }) => (
<route
{...rest}
render={(props) =>
isauthenticated ? <component {...props} /> : <redirect to="/login" />
}
/>
);
const dashboard = () => <h3>dashboard</h3>;
const login = () => <h3>login</h3>;
const app = () => (
<router>
<div>
<privateroute path="/dashboard" component={dashboard} />
<route path="/login" component={login} />
</div>
</router>
);
export default app;
在 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" />
</Route>
<Route path="/new-page" component={NewPage} />
</Switch>
</Router>
);
export default App;
在此示例中，访问 /old-page 会自动将用户重定向到 /new-page。
结论
掌握 react router 的路由对于构建复杂且用户友好的 react 应用程序至关重要。了解如何设置路由、使用核心组件以及实现嵌套路由、动态路由、路由参数和路由防护等高级技术将使您能够创建强大的导航系统。作为高级开发人员，这些技能将帮助您在 react 项目中设计和实现可扩展的路由架构，确保无缝的用户体验和可维护的代码库。
