创建 React App 不包括页面路由。

React 路由是最流行的解决方案。

添加 React 路由

要在您的应用程序中添加 React 路由，请从应用程序的根目录在终端中运行:

文件夹结构

要创建具有多个页面路由的应用程序，我们首先从文件结构开始。

在 src 文件夹中，我们将创建一个名为 pages 的文件夹，其中包含几个文件:

src\pages\:

• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js

每个文件都将包含一个非常基本的 React 组件。

基本用法

现在我们将在 index.js 文件中使用我们的路由器。

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    
      
        }>
          } />
          } />
          } />
          } />
        
      
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

示例说明

我们首先用 包装我们的内容。

然后我们定义我们的 。 一个应用程序可以有多个 。 我们的基本示例只使用了一个。

可以嵌套。 第一个的路径是/，渲染Layout组件。

嵌套的 继承并添加到父路由。 所以 blogs 路径与父路径合并成为 /blogs。

Home 组件路由没有路径，但有一个 index 属性。 将这条路由指定为父路由的默认路由，即 /。

将 path 设置为 * 将充当任何未定义 URL 的全部内容。 这对于 404 错误页面非常有用。

页面/组件

Layout 组件有 和 元素。

渲染当前选择的路线。

用于设置 URL 并跟踪浏览历史记录。

每当我们链接到内部路径时，我们都会使用 而不是 。

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

const Layout = () => {
  return (
    <>
      

      
    
  )
};

export default Layout;

const Home = () => {
  return 
Home
;
};

export default Home;

const Blogs = () => {
  return 
Blog Articles
;
};

export default Blogs;

const Contact = () => {
  return 
Contact Me
;
};

export default Contact;

const NoPage = () => {
  return 
404
;
};

export default NoPage;