路由是构建现代 Web 应用程序的一个重要方面。 React Router 是一个功能强大的库，使开发人员能够有效地处理 React 应用程序中的客户端路由。本指南将深入研究设置 React Router 的基础知识、使用基本组件，并探索高级路由技术，例如嵌套路由、动态路由、路由参数和路由防护。
React Router 允许您根据 URL 管理不同组件的导航和渲染。它有助于构建具有无缝导航体验的单页应用程序 (SPA)。
要开始使用React Router，请使用npm 或yarn 安装它。
npm install react-router-dom
或
yarn add react-router-dom
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;
本例中，当路径为 / 时渲染 Home 组件，当路径为 /about 时渲染 About 组件。
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;
在此示例中，如果没有路由匹配，则渲染 NotFound 组件。
链接组件在您的应用程序中创建导航链接，类似于锚点 () 标签，但无需重新加载页面。
示例：
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;
在此示例中，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</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;
在此示例中，主题组件包含嵌套路由，允许在主题部分内使用子导航系统。
动态路由允许您基于动态参数（例如用户 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</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;
在此示例中，用户组件使用作为路由参数传递的用户 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</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;
在此示例中，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
{...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;
在此示例中，PrivateRoute 组件在渲染 Dashboard 组件之前检查用户是否已通过身份验证。如果用户未通过身份验证，他们将被重定向到登录组件。
可以使用重定向组件来实现重定向，以编程方式将用户导航到不同的路线。
示例：
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 应用程序至关重要。通过掌握设置路由、使用 Link 和 NavLink 处理导航的基础知识，以及实现嵌套路由、动态路由、路由参数和路由防护等高级技术，您可以在应用程序中创建无缝且安全的导航体验。随着您继续发展您的技能，这些概念将成为您使用 React 构建复杂的单页应用程序的能力的基础。
以上是中级：使用 React Router 进行路由的详细内容。更多信息请关注PHP中文网其他相关文章！
