开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第41天，点击查看活动详情

写在前面

本篇是react学习的第九篇，尝试使用React Router

尝试使用React Router

接下来，我们跟着React Router官方教程尝试使用React Router写一个简单的应用

1、创建一个新的React应用程序

这次我们使用vite创建一个新的React应用程序，在你想要创建项目的目录下打开cmd，输入以下命令：

npm create vite@latest vite_react -- --template react

将创建的项目在代码编辑器打开，在终端输入以下命令运行项目：

npm install react-router-dom localforage match-sorter sort-by
npm run dev

然后就可以在浏览器打开http://127.0.0.1:5173/ 查看项目页面了

2、尝试使用React Router

按照教程，打开src/index.css，复制粘贴这些代码 ☞ css代码

以上代码的内容不用看，只是写好的css，为了页面显示用，还没有涉及到React Router的部分

接着打开src\main.jsx，将代码替换为如下代码：

import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

在上面的代码中，我们创建了一个根路由path: "/"，我们后续的路由都将嵌套在这个跟路由下面，element代表点击根路由后要展示的内容，此时在浏览器打开http://127.0.0.1:5173/ ，就可以看到页面上出现了Hello world!。但是这个页面太简单了，并不能帮助我们了解更多关于React Router的知识，所以继续往下。

再在src目录下创建src\routes\root.jsx文件，我们复制粘贴如下代码，代码中进行了html布局，左边是一个sidebar侧边栏，右边是一个detail显示内容：

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

export default function Root() {
    return (
        <>
            <div id="sidebar">
                <h1>React Router Contacts</h1>
                <div>
                    <form id="search-form" role="search">
                        <input
                            id="q"
                            aria-label="Search contacts"
                            placeholder="Search"
                            type="search"
                            name="q"
                        />
                        <div
                            id="search-spinner"
                            aria-hidden
                            hidden={true}
                        />
                        <div
                            className="sr-only"
                            aria-live="polite"
                        ></div>
                    </form>
                    <form method="post">
                        <button type="submit">New</button>
                    </form>
                </div>
                <nav>
                    <ul>
                        <li>
                            <Link to={`contacts/1`}>菜单1</Link>
                        </li>
                        <li>
                            <Link to={`contacts/2`}>菜单2</Link>
                        </li>
                    </ul>
                </nav>
            </div>
            <div id="detail">
                <Outlet />
            </div>
        </>
    );
}

上面的代码中用到了Link和Outlet，Link代表想要React Router跳转到的url，<Outlet />表示url对应显示的内容，而且因为<Outlet />在detail容器中，所以切换url时只更新detail容器中的内容

然后再在routes目录下创建Contact1.jsx文件和Contact2.jsx文件，代码如下：

Contact1.jsx：

export default function Contact1() {
  return (
    <div id="contact">
      菜单1
    </div>
  );
}

Contact2.jsx：

export default function Contact2() {
  return (
    <div id="contact">
      菜单2
    </div>
  );
}

然后回到src\main.jsx，添加修改如下代码：

...
import "./index.css";
import Root from "./routes/root"; // 添加的部分
import Contact1 from "./routes/Contact1"; // 添加的部分
import Contact2 from "./routes/Contact2"; // 添加的部分

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />, // 修改的部分
    children: [ // 添加的部分
      {
        path: "contacts/1",
        element: <Contact1 />,
      },
      {
        path: "contacts/2",
        element: <Contact2 />,
      },
    ],
  },
]);
...

这时我们再打开http://127.0.0.1:5173/ ，点击菜单1，右边显示内容为菜单1，点击菜单2，右边显示内容为菜单2

写在最后

下一篇文章我们尝试更深入地学习React Router，了解React Router路由加载数据的机制

以上就是尝试使用React Router所有代码和说明

react入门9：尝试使用React Router

写在前面

尝试使用React Router

1、创建一个新的React应用程序

2、尝试使用React Router

写在最后