四时宝库

嵌套路由的简要指南

有时，在构建多页面应用程序时，您可能对不同的页面有非常不同的功能，或者您可能希望为应用程序的不同部分创建不同的布局。这可以通过模块化来创建应用程序的不同部分来实现。

关于 React-Router

React-Router 是一个轻量级的 React 客户端和服务器端路由库。它允许您在 Web 应用程序中处理路由，根据 URL 显示不同的页面。 React Router 将匹配 URL 并加载该特定页面的组件。版本 6 将为给定的 URL 选择最具体的匹配项，因此您不必担心路由排序。

目标

使用 React Router 将应用程序分割成不同的部分。

先决条件

对于本教程，您的计算机上必须安装 Node ≥ 14.0.0 和 npm ≥ 5.6。您还需要对构建和使用可重用组件有一个大致的了解，并且您需要一个代码编辑器。我们还将使用 styled-components，这是一个允许您直接在 JS 文件中编写 CSS 的库。这消除了在不同文件之间来回移动以设置组件样式的需要。

让我们开始吧。

设置

我们将首先通过在您的终端或 cmd 上运行此命令来创建一个新的 React 应用程序：

npx create-react-app my-router-app

导航到您的应用程序，然后安装 react-router-dom 包和 styled-components 包。 命令末尾的 @6 表示您正在添加 react-router-dom 版本 6。

cd my-router-app
npm install react-router-dom@6 --save styled-components

您的 package.json 文件应类似于以下内容：

"dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.3.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.3.0",
  "react-scripts": "5.0.1",
  "styled-components": "^5.3.5",
  "web-vitals": "^2.1.4"
},

设置完成后，您可以在应用程序的文件夹中运行命令 npm start 以启动。 现在，当您在 localhost 上打开端口 3000 时，您可以看到默认的 React 应用程序。

创建页面和组件

我们在本节中创建的所有内容在技术上都是一个组件，但其中一些组件将用作页面，而其他组件将作为页面的一部分呈现。

我们首先在 src 文件夹中创建一个 pages 目录。 这是我们所有页面的去向。 而且，在我们的 src 文件夹中，我们创建了一个 components 目录，我们将在其中放置构成我们页面的其他组件。

我们将构建一个 LoginPage、一个 HomePage、一个 CollectionsPage 和一个 FavouritesPage。 我们还将使用 styled-components 为我们的组件添加非常简单的样式。

//pages/LoginPage.js

import styled from "styled-components";

const StyledHeading= styled.h1`
    font-weight: 400
`

const LoginPage = () => {
    return (
        <StyledHeading> Login Page</StyledHeading>
    )
}

export default LoginPage;

LoginPage.js 组件

//pages/HomePage.js

import styled from "styled-components";

const StyledHeading= styled.h1`
    font-weight: 400
`;

const HomePage = () => {
    return (
        <StyledHeading>Home Page</StyledHeading>
    )
}

export default HomePage;

HomePage.js 组件

//pages/CollectionsPage.js

import styled from "styled-components";

const StyledHeading= styled.h1`
    font-weight: 400
`;

const CollectionsPage = () => {
    return (
        <StyledHeading> Collections Page</StyledHeading>
    )
}

export default CollectionsPage;

CollectionsPage.js 组件

//pages/FavouritesPage.js

import styled from "styled-components";

const StyledHeading= styled.h1`
    font-weight: 400
`;

const FavouritesPage = () => {
    return (
        <StyledHeading> Favourites Page</StyledHeading>
    )
}

export default FavouritesPage;

FavouritesPage.js 组件

接下来，我们创建 Footer 组件。

//components/Footer.js

import styled from "styled-components";

const StyledFooter = styled.footer`
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #cfd8dc;
    color: snow;
    font-weight: 500
`

const Footer = () => {
    return (
        <StyledFooter>
            <p>Footer 2022</p>
        </StyledFooter>
    )
}

export default Footer;

Footer.js 组件

我们将在下一步中创建 Navbar 组件。

利用嵌套路由分割您的应用程序

嵌套路由是 React Router 提供的最强大的功能之一。 根据反应路由器文档：

路由可以相互嵌套，它们的路径也会嵌套（子继承父）

在我们的例子中，我们将使用嵌套路由概念来有条件地渲染 Navbar 和 Footer 组件。

我们首先在 components 文件夹中创建一个新组件，我们将其命名为 MainLaoyout.js 。 在这个组件中，我们将导入所有具有相似布局的组件以及出现在多个组件上的组件。 Navbarand 页脚组件将在 HomePage、CollectionsPage 和 FavouritesPage 中呈现。

//components/MainLayout.js

import React from 'react';
import Navbar from "./Navbar";
import Footer from "./Footer";
import HomePage from "../pages/HomePage";
import FavouritesPage from "../pages/FavouritesPage";
import CollectionsPage from "../pages/CollectionsPage";
import {
    Routes,
    Route,
    
  } from "react-router-dom";

  const MainLayout = () => {
    return (
        <React.Fragment>
            <Navbar />  
            <Routes>
                <Route path='/' element={<HomePage />} />
                <Route path='/favourites' element={<FavouritesPage />} />
                <Route path='/collections' element={<CollectionsPage />} />
            </Routes>
            <Footer />
        </React.Fragment>
    )
  }

  export default MainLayout;

从上面可以看出，要在多个页面上呈现一个组件，您必须将该组件放置在包含所述组件的 Routes 标记之外。 Routes 标签是 Route 标签的父标签，其中每个 Route 标签将包含可以导航到的每个页面。 这样，导航栏和页脚组件将出现在 Routes 标记中描述的所有页面上。

接下来，我们创建导航栏组件。 该组件将包含指向我们应用程序中所有其他页面的链接。

//components/Navbar.js

import styled from "styled-components";
import { Link as RouterLink } from "react-router-dom";

const StyledDiv = styled.div`
    display: flex;
    background-color: #cfd8dc;
    ul {
        display: flex;
        list-style: none;
    }
    ul li {
        padding-left: 1rem;
        color: snow;
        font-weight: 500
    }
    
`

const Navbar = () => {
    return (
        <StyledDiv>
            <ul>
                <li><RouterLink to='/home' >Home</RouterLink></li>
                <li><RouterLink to='collections' >Collections</RouterLink></li>
                <li><RouterLink to='favourites' >Favourites</RouterLink></li>
                <li><RouterLink to='login' >Logout</RouterLink></li>
            </ul>
        </StyledDiv>
    )
}

export default Navbar;

最后，在我们的 App.js 组件中，我们将不同的部分放在一起以完成我们的应用程序。

//src/App.js

import MainLayout from './components/MainLayout';
import LoginPage from './pages/LoginPage'
import './App.css';
import {
  BrowserRouter as Router,
  Routes,
  Route
  
} from "react-router-dom";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path='/login' element={<LoginPage />} />
        <Route path='*' element={<MainLayout />} />
      </Routes>
    </Router>
  );
}

export default App;

在这最后一步结束时，您应该有一个带有导航栏和页脚的主页。 当您浏览页面时，您应该会看到导航和页脚是持久的，当您单击“注销”选项时，您将看到导航和页脚不再存在。

结论

在本文中，我们使用嵌套路由来创建模块化。 我们的应用程序只有两个区域，但您可以使用此概念创建更多区域。

最后，请注意 Routes 标签中的每个子组件都必须是一个 Route 组件。 这就是为什么在 MainLayout 组件中我们使用了 React.Fragment ，所以当我们从 App.js 组件渲染它时，它被一个 Route 标签包围。

我希望你觉得这篇文章有帮助！

关注七爪网，获取更多APP/小程序/网站源码资源！