React Router 6 是 React Router 的最新版本，它引入了许多重大更改，包括使用 React 的新特性，如 hooks。以下是如何在一个新的 React 项目中设置 React Router 6 的基本步骤：
- 创建一个新的 React 项目（如果你还没有）：
npx create-react-app my-app
cd my-app- 安装 React Router 6：
npm install react-router-dom- 在项目的入口文件 (
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')
);- 在
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;- 创建
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。