使用useRoutes注册路由(React Router6)

文章目录

  • 路由的基本使用
    • 模板文件index.html
    • 入口文件index.js
    • 入口组件App.js
    • pages/Home/index.jsx(Home组件)
    • pages/About/index.jsx(About组件)
  • 使用useRoutes注册路由表
    • 第一次改进
      • App.js
    • 第二次改进
      • routes/index.js
      • App.js

路由的基本使用

create-react-app router_app,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。
npm install -save react-router-dom,默认下载安装最新版本r:react-router-dom@6。

涉及的文件包括:

  1. 模板文件index.html
  2. 入口文件index.js
  3. 入口组件App.js
  4. 路由组件pages/Home/index.jsx,即Home组件
  5. 路由组件pages/About/index.jsx,即About组件

使用useRoutes注册路由(React Router6)_第1张图片

模板文件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 Apptitle>
  head>
  <body>
    <noscript>You need to enable JavaScript to run this app.noscript>
    <div id="root">div>
  body>
html>

入口文件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>
);

注意点:

入口组件App.js

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

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>
  )
}

注意点:

  1. 路由链接
    About
  2. 注册路由
    }>
  3. 重定向
    }>

pages/Home/index.jsx(Home组件)

import React from 'react'

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

pages/About/index.jsx(About组件)

import React from 'react'

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

使用useRoutes注册路由表

第一次改进

代码更改涉及的文件:App.js。

App.js

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

export default function App() {
  const element = useRoutes([
    {
      path:"home",
      element:<Home/>
    },
    {
      path:"about",
      element:<About/>
    },
    {
      path:"/",
      element:<Navigate to="/home"/>
    },
  ])
  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">
            {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

注意点:useRoutes([]),useRoutes根据路由表生成对应的路由规则。

第二次改进

src文件夹下新建子文件夹:routes,routes下新建文件:index.js。
路由表独立成js文件:src/routes/index.js。

代码变更涉及的文件有:

  1. src/routes/index.js
  2. App.js

routes/index.js

import { Navigate } from "react-router-dom";
import About from "../pages/About";
import Home from "../pages/Home";

const routes = [
    {
        path:"/about",
        element:<About/>
    },
    {
        path:"/home",
        element:<Home/>
    },
    {
        path:"/",
        element:<Navigate to="/about"/>
    }
]

export default routes;

App.js

import React from 'react'
import {NavLink,useRoutes} from "react-router-dom";
import routes from "./routes";

export default function App() {
  const element = useRoutes(routes);
  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">
            {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

你可能感兴趣的:(React17/18,React,Router6,useRoutes,路由表)