【react】react18的学习–路由react-router-dom@6

在React 18中，我们可以使用react-router-dom的版本6来实现前端路由功能。以下是一个简单的例子，展示如何使用react-router-dom v6 创建一个带有两个路由的应用程序：

首先，确保安装了react-router-dom v6：

npm install react-router-dom@6

然后，你可以在你的React应用中这样使用它：

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

在这个例子中，我们使用BrowserRouter作为路由的根组件，并且使用Routes和Route来定义路由。每个Route通过path属性定义了它应该匹配的URL路径，并通过element属性指定当路由匹配时要渲染的组件。

这就是如何在React 18中使用react-router-dom v6 创建简单的路由的方法。