1. 創建路由開發環境

# 使用CRA創建項目
npm create-react-app react-router-pro# 安裝最新的ReactRouter包
npm i react-router-dom

2. 快速開始

// index.jsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';const router = createBrowserRouter([{path: '/login',element: <div>登錄</div>},{path: '/article',element: <div>文章</div>}
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><RouterProvider router={router} /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

3. 抽象路由模塊

// @/page/Article/index.js
const Article = () => {return <div>文章頁</div>
}export default Article

// @/router/index.js
import Login from '../page/Login'
import Article from '../page/Article'
import { createBrowserRouter } from 'react-router-dom'
const router = createBrowserRouter([{path: '/login',element: <Login></Login>},{path: '/article',element: <Article></Article>},{path: '/',element: <Login></Login>}
])export default router

// @/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {  RouterProvider } from 'react-router-dom';
// 導入路由
import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>{/* 路由綁定 */}<RouterProvider router={router} /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();