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和組件來滿足這些需求。