Basic use of routing

create-react-app router_app, Create a react project: router_app. By default, the latest version of the current react is used: react@18, react-dom@18.
npm install -save react-router-dom, download and install the latest version by default r: react-router-dom@6.

The files involved include:

Template file index.html
Entry file index.js
Entry component App.js
The routing component pages/Home/index.jsx is the Home component
The routing component pages/About/index.jsx is the About component

insert image description here

Template file index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Entry file index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
    
    BrowserRouter} from "react-router-dom";
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

Points to note: <BrowserRouter></BrowserRouter>.

Entry component App.js

import React from 'react'
import About from "./pages/About";
import Home from "./pages/Home";
import {
    
    NavLink,Route,Routes} from "react-router-dom";

export default function App() {
    
    
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>Vue Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            <NavLink className="list-group-item"  to="/about">About</NavLink>
            <NavLink className="list-group-item"  to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              <Routes>
                <Route path="/about" element={
    
    <About/>}></Route>
                <Route path="/home" element={
    
    <Home/>}></Route>
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

important point:

Routing links .
<NavLink className="list-group-item" to="/about">About</NavLink>
Register routes .
<Routes> <Route path="/about" element={<About/>}></Route> </Routes>

pages/Home/index.jsx (Home component)

import React from 'react'

export default function Home() {
    
    
  return (
    <h2>我是Home的内容</h2>
  )
}

pages/About/index.jsx (About component)

import React from 'react'

export default function About() {
    
    
  return (
    <h2>我是About的内容</h2>
  )
}

Use of the Navigate component

http://localhost:3000/home, display the Home component;
http://localhost:3000/about, display the About component.
http://localhost:3000/, neither the Home component nor the About component is displayed.
Now, we implement the redirect using the ~~Redirect~~ Navigate<Route path="/" element={<Navigate to="/about"/>}></Route> component: . Therefore, when visiting http://localhost:3000/, redirect to http://localhost:3000/about, that is, display the About component by default.

The files involved in the code change are: App.js.

import React from 'react'
import About from "./pages/About";
import Home from "./pages/Home";
import {
    
    NavLink,Route,Routes,Navigate} from "react-router-dom";

export default function App() {
    
    
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>Vue Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            <NavLink className="list-group-item"  to="/about">About</NavLink>
            <NavLink className="list-group-item"  to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              <Routes>
                <Route path="/about" element={
    
    <About/>}></Route>
                <Route path="/home" element={
    
    <Home/>}></Route>
                <Route path="/" element={
    
    <Navigate to="/about"/>}></Route>
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}