React.js路由如何高效配置

在React.js中，使用React Router庫可以高效地配置路由。以下是一些建議和步驟，幫助你更好地配置路由：

1. 安裝React Router庫： 使用npm或yarn安裝React Router庫。對于React Router v5，請運行以下命令：

   npm install react-router-dom@5
   

   對于React Router v6，請運行以下命令：

   npm install react-router-dom@6
   

2. 導入所需的組件： 在你的React組件中，導入所需的React Router組件，例如BrowserRouter、Route、Switch（v5）或Routes（v6）、NavLink等。

3. 使用BrowserRouter包裹應用： 在應用的根組件中，使用BrowserRouter組件包裹整個應用。這將確保應用中的所有路由都能正常工作。

   import { BrowserRouter } from 'react-router-dom';
   
   function App() {
     return (
       <BrowserRouter>
         {/* 應用的其他組件 */}
       </BrowserRouter>
     );
   }
   

4. 配置路由： 使用Route組件配置應用的路由。為每個路由指定一個路徑和一個組件。當URL與某個路徑匹配時，將渲染相應的組件。

   import { Route } from 'react-router-dom';
   import Home from './components/Home';
   import About from './components/About';
   import Contact from './components/Contact';
   
   function App() {
     return (
       <BrowserRouter>
         <Route path="/" exact component={Home} />
         <Route path="/about" component={About} />
         <Route path="/contact" component={Contact} />
       </BrowserRouter>
     );
   }
   

   在React Router v6中，使用Routes組件替換Switch組件。

5. 使用NavLink進行導航： 使用NavLink組件創建導航鏈接。NavLink組件會自動為選中的鏈接添加樣式。

   import { NavLink } from 'react-router-dom';
   
   function Navigation() {
     return (
       <nav>
         <NavLink to="/" exact activeClassName="active">Home</NavLink>
         <NavLink to="/about" activeClassName="active">About</NavLink>
         <NavLink to="/contact" activeClassName="active">Contact</NavLink>
       </nav>
     );
   }
   

6. 使用Route參數和查詢： 在路由中使用參數和查詢，以便根據需要傳遞數據。例如，你可以創建一個動態路由，顯示特定ID的產品信息。

   import { Route } from 'react-router-dom';
   import Product from './components/Product';
   
   function App() {
     return (
       <BrowserRouter>
         <Route path="/product/:id" component={Product} />
       </BrowserRouter>
     );
   }
   

   在組件中，使用useParams鉤子獲取路由參數。

   import { useParams } from 'react-router-dom';
   
   function Product() {
     const { id } = useParams();
     // 根據ID獲取產品信息并顯示
   }
   

遵循以上步驟和建議，你可以高效地配置React.js應用的路由。