React学习06-React Router 6

React Router 6 是 React Router 的最新版本，它引入了许多重大更改，包括使用 React 的新特性，如 hooks。以下是如何在一个新的 React 项目中设置 React Router 6 的基本步骤：

1. 创建一个新的 React 项目（如果你还没有）：

npx create-react-app my-app
cd my-app

2. 安装 React Router 6：

npm install react-router-dom

3. 在项目的入口文件 (src/index.js) 中，包含 BrowserRouter 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
 
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

4. 在 src/App.js 文件中，添加一个简单的路由：

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
 
function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  );
}
 
export default App;

5. 创建 HomePage 和 AboutPage 组件：

// src/HomePage.js
import React from 'react';
 
export default function HomePage() {
  return <h2>Home Page</h2>;
}

// src/AboutPage.js
import React from 'react';
 
export default function AboutPage() {
  return <h2>About Page</h2>;
}

现在，你应该有一个基本的 React 应用程序，它使用 React Router 6 来处理路由。当你访问 / 时，将渲染 HomePage，访问 /about 时，将渲染 AboutPage。