import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Router>
      <App />
    </Router>
  </StrictMode>
);

import React from 'react';
import { Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
const App = () => {
  return (
    <div>
      {/* 
        Route 組件定義路由，exact 精確匹配，確保路徑完全是'/'才渲染 Home 組件，
        訪問(wèn)'/about'時(shí)不會(huì)渲染 Home 組件。訪問(wèn)'/'渲染 Home 組件，訪問(wèn)'/about'渲染 About 組件。
      */}
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}
export default App

import { lazy } from 'react';
// lazy 用于設(shè)置路由懶加載
const Home = lazy(() => import('@/pages/Home'));
const About = lazy(() => import('@/pages/About'));
const Router = [
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  },
  // 設(shè)置 404 頁(yè)面
  {
    path: '*',
    element: <NotFound />
  }
];
export default Router

import router from './router';
import { Suspense } from 'react';
import { useRoutes } from 'react-router-dom';
function App() {
  // useRoutes 依傳入路由配置生成相應(yīng)路由元素，代表應(yīng)渲染組件樹(shù)結(jié)構(gòu)。
  const element = useRoutes(router);
  // Suspense 設(shè)頁(yè)面跳轉(zhuǎn)加載提示，組件加載時(shí)顯示 fallback 指定內(nèi)容。
  return <Suspense fallback={'loading...'}>{element}</Suspense>;
}
export default App

import React from 'react';
import { Link } from 'react-router-dom';
const Navigation = () => {
  return (
    <nav>
      {/* 
        Link 組件 to 屬性指定導(dǎo)航目標(biāo)路徑，點(diǎn)擊'Home'鏈接導(dǎo)航到根路徑渲染 Home 組件，
        點(diǎn)擊'About'鏈接導(dǎo)航到'/about'路徑渲染 About 組件。
      */}
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}
export default Navigation

import React from 'react';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import Home from './Home';
import About from './About';
const App = () => {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}
export default App

import React from 'react';
import { Link } from 'react-router-dom';
const Navigation = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}
export default Navigation

import React from 'react';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}
export default App

import React from 'react';
import { Route, BrowserRouter as Router } from 'react-router-dom';
const ArticleDetail = props => {
  const articleId = props.match.params.id;
  // 根據(jù) articleId 獲取文章詳情并渲染
  return (
    <div>
      <h1>Article Detail {articleId}</h1>
    </div>
  );
}
const App = () => {
  return (
    <Router>
      <Route path="/articles/:id" component={ArticleDetail} />
    </Router>
  );
}
export default App

import React from 'react';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import ProductDetail from './ProductDetail';
import ProductReviews from './ProductReviews';
const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/products/:id" component={ProductDetail}>
          <Route path="/products/:id/reviews" component={ProductReviews} />
        </Route>
      </Switch>
    </Router>
  );
}
export default App

import React from 'react';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
const DepartmentDetail = props => {
  return (
    <div>
      <h1>Department Detail</h1>
      {/* 展示部門相關(guān)信息 */}
      <Route path={`${props.match.path}/employees`} component={EmployeeList} />
    </div>
  );
}
const EmployeeList = props => {
  return (
    <div>
      <h2>Employee List</h </div>
      {/* 展示員工列表 */}
      <Route path={`${props.match.path}/:employeeId`} component={EmployeeDetail} />
      <Route path={`${props.match.path}/:employeeId/performance`} component={EmployeePerformance} />
    </div>
  );
}
const EmployeeDetail = props => {
    const { employeeId } = props.match.params;
    return (
      <div>
        <h3>Employee Detail - ID: {employeeId}</h3>
        {/* 展示員工個(gè)人詳細(xì)信息 */}
      </div>
    );
}
const EmployeePerformance = props => {
    const { employeeId } = props.match.params;
    return (
      <div>
        <h3>Employee Performance - ID: {employeeId}</h3>
        {/* 展示員工績(jī)效相關(guān)信息 */}
      </div>
    );
}
const App = () => {
    return (
      <Router>
        <Switch>
          <Route path="/departments/:departmentId" component={DepartmentDetail} />
        </Switch>
      </Router>
    );
}
export default App

import React from 'react';
import { Route, BrowserRouter as Router, useNavigate } from 'react-router-dom';
const MyComponent = props => {
  const Navigate = useNavigate();
  const handleClick = () => {
    Navigate('/about');
  }
  return (
    <div>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}
const App = () => {
  return (
    <Router>
      <Route path="/" component={MyComponent} />
    </Router>
  );
}
export default App

import { lazy } from 'react';
import Auth from './AuthRoute';
const Home = lazy(() => import('@/pages/Home'));
const About = lazy(() => import('@/pages/About'));
const List = lazy(() => import('@/pages/List'));
const User = lazy(() => import('@/pages/User'));
const NotFound = lazy(() => import('@/pages/NotFound'));
const Router = [
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/app/',
    element: (
      // 自定義權(quán)限組件
      <Auth>
        <BasicLayout />
      </Auth>
    ),
    errorElement: <NotFound></NotFound>,
    children: [
      {
        path: 'list',
        element: <List />
      },
      {
        path: 'list/user',
        element: <User />
      }
    ]
  },
  // 設(shè)置404頁(yè)面
  {
    path: '*',
    element: <NotFound />
  }
];
export default Router

import { useEffect, useRef } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { message } from 'antd';
import useUpdateEffect from '@/components/useUpdateEffect';
export default function Auth({ children }: any) {
  const location = useLocation().pathname;
  const didMountRef = useRef(false);
  const Navigate = useNavigate();
  const token = localStorage.getItem('token');
  useEffect(() => {
    if (didMountRef.current) {
      if (!token) {
        message.error('您未登錄，將跳轉(zhuǎn)');
        setTimeout(() => {
          Navigate('/login');
        }, 1000);
      }
    } else {
      didMountRef.current = true;
    }
  }, [token]);
  return children;
}

import React from 'react';
const CommonLine = props => (
  // 根據(jù)個(gè)人需求改動(dòng)
  <div>未找到該頁(yè)面</div>
);
export default CommonLine