React-router 基础使用

React Router 是 React 应用程序中用于管理路由的标准库。以下是对 React Router V6.23.1 版本的基础使用的详细说明。

1. 安装 React-router 

首先确保安装了 React-router。

npm install react-router-dom react react-dom

2. 基本使用

要在 React 应用中使用 React-router，首先需要配置基本的路由结构。在 src 目录下创建以下文件：

• App.tsx

• Home.tsx

• About.tsx

• Contact.tsx

2.1. App.tsx

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';import Home from './Home';
import About from './About';
import Contact from './Contact';function App() {return (<BrowserRouter><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/contact">Contact</Link></li></ul></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/contact" element={<Contact />} /></Routes></BrowserRouter>)
}export default App;

2.2. Home.tsx

import React from 'react';function Home() {return (<div><h2>Home</h2><p>Welcome to the home page!</p></div>);
}export default Home;

2.3. About.tsx

import React from 'react';function About() {return (<div><h2>About</h2><p>This is the about page.</p></div>);
}export default About;

2.4. Contact.tsx

import React from 'react';