React Router Dom V6基本使用：如何设置到其他组件的路由

咕咕酱没有悲伤

已于 2023-01-26 22:55:28 修改

阅读量398

点赞数

分类专栏：前端文章标签： react.js 前端 javascript

于 2023-01-24 16:07:45 首次发布

原文链接：https://www.freecodecamp.org/news/how-to-use-react-router-version-6/

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

原文：https://www.freecodecamp.org/news/how-to-use-react-router-version-6/
汉化并简化一下

在本教程中，我们将讨论什么是React Router以及如何使用它。然后我们将讨论它的功能，以及如何在React应用中使用它们来导航和渲染多个组件。

请确保拥有：

一个React应用
对React组件有很好的理解

安装 react router dom v6

npm install react-router-dom@6

或

yarn add react-router-dom@6

如何配置React Router

安装后要做的第一件事是让React Router在应用的任何地方都可使用。
为此，请打开src文件夹中的index.js文件，从react-router-dom中导入BrowserRouter，并使用它来包裹根组件（App组件）
建立项目后，index.js 最初看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

使用React Router进行修改后，你的index.js现在应该长这样：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

我们所做只是将React.StrickMode替换为从react-router-dom导入的BrowserRouter。现在，路由功能在应用的任何地方都可以使用。

怎样路由到其他组件

现在我们来看看如何路由和渲染不同的组件。

第一步 - 创建多个组件

我们将创建Home，About和Contact组件，代码分别如下：
Home组件

function Home() {
  return (
    <div>
      <h1>This is the home page</h1>
    </div>
  );
}

export default Home;

About组件

import React from 'react'

function About() {
    return (
        <div>
            <h1>This is the about page</h1>
        </div>
    )
}

export default About

Contact组件

import React from 'react'

function Contact() {
    return (
        <div>
            <h1>This is the contact page</h1>
        </div>
    )
}

export default Contact

第二步 - 定义路由

由于App组件是React代码最初渲染的根组件，我们将在其中创建所有路由。
App 组件

import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={ <Home/> } />
        <Route path="about" element={ <About/> } />
        <Route path="contact" element={ <Contact/> } />
      </Routes>
    </div>
  )
}

export default App

首先我们导入了Routes和Route。然后我们导入了所有需要在上面附加路由的子组件。现在让我们分解定义路由的过程。
Routes作为所有独立路由的容器/父级。

Route用于创建单个路由。它有两个attributes：

path，它指定所需组件的URL路径。你可以把这个路径名命名为任何名字。如上，你会注意到第一个路径名是反斜杠(/)。当应用程序第一次加载时，任何路径名是反斜杠的组件都会最先渲染。这意味着Home组件将是第一个被渲染的组件。
element，指定了路由应当渲染的组件

我们现在所做的就是定义路由及其路径，并将它们附加到各自的组件中。

如果你是从V5来的，那么你会注意到我们没有使用exact和switch，这很棒。

第三步 - 使用`Link`导航到路由

如果到目前为你的代码没有任何错误，那么您的浏览器应该正在渲染Home组件。
我们现在将使用另一个React Router的功能，根据我们在App组件中创建的路由和路径名导航到其他页面。如下：
Home组件

import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>This is the home page</h1>
      <Link to="about">Click to view our about page</Link>
      <Link to="contact">Click to view our contact page</Link>
    </div>
  );
}

export default Home;