ReactJS - BrowserRouter：React 路由入门指南

你好，有抱负的 React 开发者们！今天，我们将踏上一段激动人心的旅程，探索 React 应用程序中的路由世界。如果你是编程新手，不用担心；我将作为你的友好向导，一步步解释所有内容。那么，来杯咖啡，让我们开始吧！

ReactJS - BrowserRouter

路由概念

什么是路由？

想象你在一个大图书馆里。你想找一本特定的书，但你不知道它在哪儿。这时，图书馆的目录就派上用场了。它会告诉你确切的书架位置。在 Web 应用程序中，路由的工作原理类似。它就像一张地图，告诉你的应用程序根据 URL 显示哪个组件。

为什么我们需要路由？

假设你正在构建一个个人网站，有不同的页面：首页、关于和联系。如果没有路由，你将不得不根据用户操作手动显示和隐藏组件。这是繁琐且容易出错的。路由自动化了这个过程，使你的应用程序更加有组织和用户友好。

进入 BrowserRouter

在 React 世界中，我们有一个名为 BrowserRouter 的神奇工具。它是 react-router-dom 库的一部分，帮助我们实现 React 应用程序中的路由。把它想象成你应用程序的个人图书管理员，随时准备引导用户到达正确的“书籍”（或者在我们的情况下，组件）。

如何应用路由

现在我们理解了概念，让我们来写一些代码！

步骤 1：安装

首先，我们需要安装 react-router-dom 包。打开你的终端并运行：

npm install react-router-dom

步骤 2：设置 BrowserRouter

让我们开始，通过 BrowserRouter 包裹我们的主 App 组件。这样做：

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
<Router>
<App />
</Router>
);

export default Root;

在这个例子中，我们导入了 BrowserRouter 并将其重命名为 Router 以简化。然后我们用 Router 包裹了 App 组件。这为我们的整个应用程序设置了路由上下文。

步骤 3：定义路由

现在，让我们在我们的 App 组件中定义一些路由：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

让我们分解一下：

我们从 react-router-dom 导入 Route 和 Switch。
Switch 确保一次只渲染一个路由。
每个 Route 组件定义了一个 URL 路径和一个 React 组件之间的映射。
首页路由上的 exact 属性确保它只匹配确切的路径 "/"。

步骤 4：创建导航

现在，让我们为我们的应用程序添加一些导航：

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation = () => (
<nav>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/about">关于</Link></li>
<li><Link to="/contact">联系</Link></li>
</ul>
</nav>
);

export default Navigation;

在这里，我们使用 react-router-dom 的 Link 组件。它就像一个 <a> 标签，但它可以防止在导航时重新加载页面。

步骤 5：组合所有内容

让我们更新我们的 App 组件以包含导航：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

就这样！一个带有路由设置的基本 React 应用程序。

高级路由技术

现在我们已经覆盖了基础知识，让我们看看一些更高级的技术：

1. URL 参数

有时，你希望通过 URL 传递数据。例如，一个用户资料页面：

<Route path="/user/:id" component={UserProfile} />

在你的 UserProfile 组件中，你可以这样访问 id 参数：

import { useParams } from 'react-router-dom';

const UserProfile = () => {
let { id } = useParams();
return <h1>用户 {id} 的资料</h1>;
};

2. 嵌套路由

你可以在组件中嵌套路由。这对于复杂的布局很有用：

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</div>
);

const Users = () => (
<div>
<h1>用户</h1>
<Switch>
<Route exact path="/users" component={UserList} />
<Route path="/users/:id" component={UserProfile} />
</Switch>
</div>
);

3. 程序化导航

有时你想程序化地导航，比如在表单提交后：

import { useHistory } from 'react-router-dom';

const LoginForm = () => {
let history = useHistory();

const handleSubmit = () => {
// ...处理登录逻辑
history.push('/dashboard');
};

return (
<form onSubmit={handleSubmit}>
{/* 表单字段 */}
</form>
);
};

路由方法表

下面是一个我们讨论的主要路由方法的便捷表格：

方法	目的	示例
`<BrowserRouter>`	包裹应用以启用路由	`<BrowserRouter><App /></BrowserRouter>`
`<Route>`	定义一个路由	`<Route path="/about" component={About} />`
`<Switch>`	确保只渲染一个路由	`<Switch><Route ... /><Route ... /></Switch>`
`<Link>`	创建一个路由链接	`<Link to="/about">关于</Link>`
`useParams()`	访问 URL 参数	`let { id } = useParams();`
`useHistory()`	程序化导航	`history.push('/dashboard');`

就这样，伙计们！我们已经通过 BrowserRouter 探索了 React 路由的基础。记住，熟能生巧，所以不要害怕在你的项目中尝试这些概念。

快乐编码，愿你的路由总能引导你到达正确的组件！

Credits: Image by storyset