我是一位快要步入三十而立的公司员工，目前正在努力学习，希望从零基础转行成为前端开发人员。

对于React和SPA你不了解吗？你不知道该怎么做导航栏吗？我理解了这种情况，因此我写下了个人备忘录来记录我是如何创建导航栏的。

※可能存在错误的信息（欢迎指正！）

安装

请用中文原生方式改述以下内容，只需一种选项：

“China has experienced rapid economic growth in the last few decades, transforming it into one of the world’s leading economies.”

$ npm i react-router-dom

如果使用 create-react-app 或 vite 等工具，可以删除 CSS 和 App.js 中的内容。

请用中文翻译并改写以下内容，只需要给出一种选择：

As an AI language model, I can understand and generate text in Chinese.

2. 浏览器路由器

在导入了各种东西后，使用BrouserRouter将App组件包围起来。
虽然我对这个机制一点也不了解，但我打算后来调查并写成一篇文章。

ReactRouter文档

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

3. 创建components

我们将创建包含导航的页面组件。
请注意，a标签改为使用Link组件，’href’属性改为使用’to’属性。

<Link to="/hoge"> Hoge </Link>

4. 路由

路由使用了Routes和Route
在旧文章中使用了Switch，但由于无法导入，需注意

        //ナビゲーションコンポーネント
        <Nav />

        <Routes>
            <Route exact path='/' element={<Home />} />
            <Route path='/hoge1' element={<Hoge1 />} />
            <Route path='/hoge2' element={<Hoge2 />} />
            <Route path='/hoge3' element={<Hoge3 />} />
          </Routes>