React.js路由怎么配置

在React应用中，路由通常是通过react-router-dom库来配置的。以下是一个基本的React路由配置示例：

1. 首先，确保你已经安装了react-router-dom库。如果没有安装，可以通过npm或yarn来安装它：

npm install react-router-dom
# 或者
yarn add react-router-dom

2. 在你的React应用中，创建几个页面组件，例如Home、About和NotFound：

// Home.js
import React from 'react';

const Home = () => {
  return <h1>Home Page</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
  return <h1>About Page</h1>;
};

export default About;

// NotFound.js
import React from 'react';

const NotFound = () => {
  return <h1>404 - Not Found</h1>;
};

export default NotFound;

3. 在你的主组件（通常是App.js）中，使用BrowserRouter、Routes和Route组件来配置路由：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

在这个例子中，我们使用BrowserRouter组件来包裹整个应用，它提供了路由功能所需的历史记录管理。Routes组件用于包裹一系列的Route组件，每个Route组件定义了一个路径和对应的组件。当URL与某个Route的路径匹配时，该Route指定的组件将被渲染。

• path="/" element={<Home />} 定义了当路径为根路径（/）时，渲染Home组件。
• path="/about" element={<About />} 定义了当路径为/about时，渲染About组件。
• path="*" 是一个通配符路径，当没有其他路径匹配时，渲染NotFound组件。

注意：在实际应用中，你可能还需要配置嵌套路由、路由守卫（如权限控制）等高级功能。react-router-dom提供了丰富的API和组件来满足这些需求。