反应路由器 - Javascript

简介

React Router是React的官方路由库，能够帮助我们在单页应用中管理路由。它提供了一些API，例如帮助我们在URL和应用程序中的组件之间进行动态的映射，根据条件匹配不同的路由规则等。

React Router分为三个主要的组件：

1. ：要改变URL并呈现新的组件时，Router是必须的。

2. ：Route是我们定义UI组件与路由之间的关系的地方。

3. ：Link允许我们在HTML 标记上添加路由功能。

安装

React Router存在于npm包仓库中，可以使用npm或yarn作为包管理器安装。

使用npm:

npm install react-router-dom

使用yarn:

yarn add react-router-dom

基本用法

1. 定义路由

React Router使用组件来定义URL与对应的UI组件之间的映射。

在App.js文件上添加如下代码。

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

export default App;

2. 渲染路由

我们需要用组件来定义应该被渲染的组件。在这个例子中，我们定义了两个Route组件，将首页路径指向Home组件，将关于页面路径指向About组件。由于我们在组件中使用了这样的组件，我们的应用程序现在就能理解了应该在页面上渲染哪个组件了。

3. 创建UI组件

在这个例子中，我们将Home组件和About组件作为UI组件来示范。请在src文件夹下创建一个名为components的文件夹，并在components文件夹下创建Home.js和About.js文件。

Home.js文件内容：

import React from "react";

function Home() {
  return (
    <div>
      <h2>首页</h2>
    </div>
  );
}

export default Home;

About.js文件内容：

import React from "react";

function About() {
  return (
    <div>
      <h2>关于页面</h2>
    </div>
  );
}

export default About;

然后我们就可以运行我们的项目了，并在浏览器上访问localhost:3000/来查看我们的应用运行效果。

动态路由

动态路由用于在URL中传递参数，并在应用程序中获取参数。React Router使用URL参数来匹配并分派路由。

1. 声明动态路由参数

通过在路由路径（映射到组件）上添加参数，我们可以声明一个动态的路由。例如，以下路由就声明了一个名为:id的动态路由参数。

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

这里，id被称为参数，:符号是React Router用于声明动态路由的方式。

2. 获取动态路由参数

我们可以使用props.match.params对象来获取动态路由参数的值。它是在和组件之间传递的。

下面是一个简单的用法示例：

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/user/:id" component={User} />
    </BrowserRouter>
  );
}

function User(props) {
  const { id } = props.match.params;
  return <h1>用户ID： {id}</h1>;
}

export default App;

在这个示例中，当用户访问/user/123的URL时，我们将从路由中获取到id为123，并把它用链接在页面上展示出来。

嵌套路由

嵌套路由是指一些路由可以作为主路由的子路由被渲染进来。

1. 创建一个存在类似子路由的组件。

在这个等式中，我们创建了一个App组件，并且我们渲染了两个子组件：Dashboard和Profiles。例如，Dashboard可以展示用户工作面板，而Profiles可以展示用户列表。在Profiles组件内，我们可以创建另外一些类似子路由的 Route组件。

2. 渲染嵌套路由

在这个例子中，我们用Dashboard旋转为父路由。当Dashboard面板被加载时，它的子路由被渲染并附加在Dashboard组件里。我们用到<Route>元素的渲染嵌套路由。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">主页</Link>
            </li>
            <li>
              <Link to="/dashboard">工作面板</Link>
            </li>
          </ul>
        </nav>

        <Route exact path="/" component={Home} />
        <Route path="/dashboard" component={Dashboard} />
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>主页</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>工作面板</h2>
      <nav>
        <ul>
          <li>
            <Link to="/dashboard/profiles">用户列表</Link>
          </li>
        </ul>
      </nav>

      <Route exact path="/dashboard/profiles" component={Profiles} />
    </div>
  );
}

function Profiles() {
  return (
    <div>
      <h3>用户列表</h3>
      <ul>
        <li>
          <Link to="/dashboard/profiles/1">用户1</Link>
        </li>
        <li>
          <Link to="/dashboard/profiles/2">用户2</Link>
        </li>
        <li>
          <Link to="/dashboard/profiles/3">用户3</Link>
        </li>
      </ul>

      <Route path="/dashboard/profiles/:id" component={Profile} />
    </div>
  );
}

function Profile(props) {
  const { id } = props.match.params;
  return <h4>用户ID: {id}</h4>;
}

export default App;

在这个例子中，我们创建了嵌套Route组件，其中Dashboard是父路由，而Profiles是子路由。当我们点击工作面板中的用户列表链接时，Profiles组件及其子路由（Profile）将被渲染。