ReactJS 路由器

ReactJS 路由器是 React 应用程序中的一种核心功能，它允许程序员管理应用程序的不同页面和路由，以及在 URL 发生变化时自动更新页面内容。ReactJS 路由器是前端开发中必不可少的一部分，并且它已经成为大多数现代 Web 应用程序的标准实践。

React Router库

ReactJS 路由器并不是 ReactJS 核心库的一部分，它需要使用第三方库 - React Router。React Router 是一个用于 React 应用程序的路由库，我们可以在 React 应用程序中安装 React Router 并且轻松管理页面和路由。

安装 React Router

我们可以使用 npm 来安装 React Router。在我们的项目中使用以下命令：

npm install react-router-dom

BrowserRouter 和 Route

React Router 提供了两种核心组件 we 可以用来管理应用程序路由：BrowserRouter 和 Route。

• BrowserRouter：BrowserRouter 是 React Router 库的一个组件，它可以将我们的应用程序包装在一个基于URL的路由器中。我们可以使用 BrowserRouter 来从 URL 分发路由到我们的“Route”组件（下面会介绍）。

• Route：Route 是我们用来定义路由的核心组件之一。我们可以使用 Route 组件将不同的 URL 映射到应用程序中的不同组件。当 URL 匹配实际的路径时，会渲染 Route 组件并显示与该路径匹配的内容。

让我们看看在 React 应用程序中如何使用 React Router 加载组件。

在 App.js 文件中我们可以定义一个组件，如下：

import { BrowserRouter as Router, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

function App() {
  return (
    <Router>
      <Route path="/" component={HomePage} exact />
      <Route path="/about" component={AboutPage} />
    </Router>
  );
}

export default App;

在这个例子中，我们使用 Router 将我们的应用程序包装在一个基于 URL 的路由器中。我们定义了两个 Route 组件来指定我们想要映射到不同 URL 的组件。我们使用 exact 属性来确保只有当 URL 准确匹配时才会渲染 HomePage 组件。

嵌套路由

我们可以根据需要嵌套 Route 组件。例如，我们可能需要在一个页面中嵌套一个 React 组件。在这种情况下，我们可以使用嵌套路由来实现此目的。

import { BrowserRouter as Router, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import BlogPage from './pages/BlogPage';
import BlogPost from './components/BlogPost';

function App() {
  return (
    <Router>
      <Route path="/" component={HomePage} exact />
      <Route path="/about" component={AboutPage} />
      <Route path="/blog" component={BlogPage}>
        <Route path="/blog/:postId" component={BlogPost} />
      </Route>
    </Router>
  );
}

export default App;

在这个例子中，我们定义了三个 Route 组件来指定我们想要映射到不同 URL 的组件。blog 组件中，我们嵌套了一个进一步的 Route 组件，用于渲染单个文章的页面。BlogPost 组件将带有唯一博客帖子 ID 的 URL 作为参数，我们可以使用这个参数来检索和渲染正确的博客帖子页面内容。

Switch 组件

在某些情况下，我们可能需要在 URL 中进行精确匹配，以确保正确的页面或组件得到显示。在这种情况下，我们需要使用 Switch 组件。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </Router>
  );
}

export default App;

在这个例子中，我们使用 Switch 组件根据 URL 的准确匹配来加载我们想要的组件。如果 URL 与上述任何路径都不匹配，我们可以使用 Route 组件来加载我们的自定义“404”页面，表示页面未找到。

Link 组件

Link 组件是 React Router 库中的一个重要组件，它允许我们在我们的 React 应用程序中轻松浏览到不同的 URL。当用户单击链接时，React Router 会自动更新 URL 并将我们带到正确的页面或组件。Link 组件可以在页面中添加一个链接，而不会重新加载整个页面。

import { Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

function App() {
  return (
    <Router>
      <Navigation />
      <Route exact path="/" component={HomePage} />
      <Route path="/about" component={AboutPage} />
    </Router>
  );
}

export default App;

在这个例子中，我们创建了一个 Navigation 组件来放置 Link 组件。对于每个 Link 组件，我们传递一个 to 属性，该属性指定 URL，该 URL 在用户单击链接时更新。

总结

ReactJS 路由器是 React 应用程序中的一个核心功能，它允许程序员管理应用程序的不同页面和路由，以及在 URL 发生变化时自动更新页面内容。React Router 是一个用于 React 应用程序的路由库，我们可以在 React 应用程序中安装 React Router 并且轻松管理页面和路由。BrowserRouter、Route、Switch 和 Link 组件是 React Router 库的核心组件，它们可以帮助我们管理路由、页面和导航，从而创建出更好的 Web 应用程序。