引入路由的意義在於當我們訪問不同的url時，react所構造的單頁面應用能夠進行相應的跳轉，展示我們設定的子頁面。

1、安裝react-router-dom，目前版本是V6

官網地址：https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/tutorial

npm install react-router-dom@6 history@5

2、在my-app專案的src目錄下建立我們自己的頁面結構：新建pages/home ;pages/errorr,並且在對應的目錄下建立對應的js檔案。

例如：home.js

function Home() {
    
 
return (
      <div className="Home">
          home page
      </div>
    );
  }
  
  export default Home;

3、在router.js中配置路由：

import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from '../pages/home/home'; import User from '../pages/user/user'; import Error from '../pages/error/error'; function Router(){ return( <BrowserRouter> <Routes> <Route path="/" element={<Home />}> <Route path="user" element={<User />}/> <Route path="home" element={<Home />}/> </Route> <Route path="/error" element={<Error/>}/> </Routes> </BrowserRouter> ); } export default Router;

4、在入口檔案index.js中引入路由：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Router from './router/router';

ReactDOM.render(
  <React.StrictMode>
    <Router/>
    <App />
    
  </React.StrictMode>,
  document.getElementById('root')
);

 
// 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();

5、訪問url: