react教程如何用路由基础语法使用跳转

原创已于 2024-08-27 17:01:51 修改 · 1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #vue.js

于 2024-08-27 16:59:46 首次发布

react 专栏收录该内容

2 篇文章

订阅专栏

如果需要页面初始化参考这个回答链接：react初始化

本文是react教程如何用路由基础语法使用跳转，使用 JSX 语法定义一组路由规则，导入react-router-dom模块，通过Route定义路由路径，对应组件(注:/路径配（自定义的）组件)通过Link声明跳转

import { FC } from "react";
import {
  HashRouter as Router, // 声明路由模式
  Route, // 声明单个路由 path\element
  Routes, // 声明一组路由
  Link, //
  NavLink, // 声明式导航
  Navigate, // 路由重定向 代替v5 Redirect
} from "react-router-dom";

interface Props {}
const Index: FC<Props> = () => {
  return (
    <fieldset>
      <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>写代码</li>
        <li>打游戏</li>
        <li>旅行</li>
        <hr />
        组件匹配的内容
      </ul>
    </fieldset>
  );
};

export default Index;

// 定义一个名为eat的函数，用于表示吃饭的动作
const eat = () => {
  // 返回一个包含“吃饭”文字的h1元素，用于在网页上显示
  return <h1>吃饭</h1>;
};
const sleep = () => {
  return <h1>睡觉</h1>;
};
const code = () => {
  return <h1>写代码</h1>;
};
const game = () => {
  return <h1>打游戏</h1>;
};
const travel = () => {
  return <h1>旅行</h1>;
};

 {/* { 组件匹配的内容} */}
      {/* 使用 JSX 语法定义一组路由规则 */}
      <Routes>
        {/* 当 URL 路径为 "/eat" 时，渲染 Eat 组件 */}
        <Route path="/eat" element={<Eat />} />
        {/* // 当 URL 路径为 "/sleep" 时，渲染 Sleep 组件 */}
        <Route path="/sleep" element={<Sleep />} />
        {/* // 当 URL 路径为 "/code" 时，渲染 Code 组件 */}
        <Route path="/code" element={<Code />} />
        {/* // 当 URL 路径为 "/game" 时，渲染 Game 组件 */}
        <Route path="/game" element={<Game />} />
        {/* // 当 URL 路径为 "/travel" 时，渲染 Travel 组件 */}
        <Route path="/travel" element={<Travel />} />
      </Routes>

报错：Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.
TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.
at LinkWithRef (http://localhost:3000/static/js/bundle.js:38142:5)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:24283:22)
at updateForwardRef (http://localhost:3000/static/js/bundle.js:27532:24)
at beginWork (http://localhost:3000/static/js/bundle.js:29593:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:14539:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:14583:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:14640:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:34538:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:33786:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:33709:9)
ERROR
Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.
TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.
at LinkWithRef (http://localhost:3000/static/js/bundle.js:38142:5)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:24283:22)
at updateForwardRef (http://localhost:3000/static/js/bundle.js:27532:24)
at beginWork (http://localhost:3000/static/js/bundle.js:29593:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:14539:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:14583:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:14640:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:34538:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:33786:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:33709:9)

原因：Link 组件需要被包裹在 <Router> 组件中

App.tsx中的代码：

// App.tsx代码
import { FC } from "react";
import {
  HashRouter as Router, // 声明路由模式
  Route, // 声明单个路由 path\element
  Routes, // 声明一组路由
  Link, //
  NavLink, // 声明式导航
  Navigate, // 路由重定向 代替v5 Redirect
} from "react-router-dom";

// 定义一个名为eat的函数，用于表示吃饭的动作
const Eat = () => (
  // 返回一个包含“吃饭”文字的h1元素，用于在网页上显示
  <h1>吃饭</h1>
);

const Sleep = () => <h1>睡觉</h1>;

const Code = () => <h1>写代码</h1>;

const Game = () => <h1>打游戏</h1>;

const Travel = () => <h1>旅行</h1>;

interface Props {}
const Index: FC<Props> = () => {
  return (
    <Router>
      <ul>
        <li>
          <Link to="/eat">吃饭</Link>
        </li>
        <li>
          <Link to="/sleep">睡觉</Link>
        </li>
        <li>
          <Link to="/code">敲代码</Link>
        </li>
        <li>
          <Link to="/game">打游戏</Link>
        </li>
        <li>
          <Link to="/travel">旅行</Link>
        </li>
      </ul>
      <hr /> 
      {/* { 组件匹配的内容} */}
      {/* 使用 JSX 语法定义一组路由规则 */}
      <Routes>
        {/* 当 URL 路径为 "/eat" 时，渲染 Eat 组件 */}
        <Route path="/" element={<Eat />} />
        {/* // 当 URL 路径为 "/sleep" 时，渲染 Sleep 组件 */}
        <Route path="/sleep" element={<Sleep />} />
        {/* // 当 URL 路径为 "/code" 时，渲染 Code 组件 */}
        <Route path="/code" element={<Code />} />
        {/* // 当 URL 路径为 "/game" 时，渲染 Game 组件 */}
        <Route path="/game" element={<Game />} />
        {/* // 当 URL 路径为 "/travel" 时，渲染 Travel 组件 */}
        <Route path="/travel" element={<Travel />} />
      </Routes>
    </Router>
  );
};

export default Index;

index.tsx中的代码：

// 导入 createRoot
import { createRoot } from 'react-dom/client';

// 导入 App根组件
import App from './App'; 

import React from 'react';

// 创建 root
const root = createRoot(document.querySelector('#root') as HTMLElement) ;

// 调用 root 的render方法渲染
root.render(<App />);

效果：点击不同路由，跳转不同的组件