react动态路由的实现示例

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

//jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 
import HomePage from './HomePage'; 
import AboutPage from './AboutPage'; 
import DynamicComponent from './DynamicComponent'; 


function App() { 
   return ( 
     <Router> 
       <Routes> 
         <Route path="/" element={<HomePage />} /> 
         <Route path="/about" element={<AboutPage />} /> 
        {/* 动态路由可以在这里通过条件渲染或其他方式实现 */} 
        {/* 例如，根据某个状态来渲染一个路由 */} 
          {showDynamicRoute && ( 
            <Route path="/dynamic" element={<DynamicComponent />} /> 
          )} 
        </Routes> 
     </Router> 
   ); 
}

//jsx
import { useState } from 'react'; 
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; 


function App() { 
const [isLoggedIn, setIsLoggedIn] = useState(false); 


return ( 
   <Router> 
    <nav> 
     <ul> 
      <li> 
        <Link to="/">Home</Link> 
      </li> 
      <li> 
        <Link to="/about">About</Link> 
      </li> 
      <li> 
        <button onClick={() => setIsLoggedIn(true)}>Login</button> {/* 假设的登录按钮 */} 
      </li> 
     </ul> 
    </nav> 
    <Routes> 
     <Route path="/" element={<HomePage />} /> 
     <Route path="/about" element={<AboutPage />} /> 
       {isLoggedIn && ( 
     <Route path="/dashboard" element={<DashboardPage />} /> {/* 根据登录状态动态显示的路由         */} 
)} 
    </Routes> 
  </Router> 
 ); 
}