Javascript 如何将ReactionRouterDOM Link组件与RouterProvider一起正确使用

import React from "react";

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home;

import React from "react";

const About = () => {
  return (
    <div>About</div>
  )
}

export default About

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/about",
    element: <About />
  }
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </RouterProvider>
  </React.StrictMode>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

import React from "react";
import { Link } from "react-router-dom";

const Home = () => {
  return (
    <div>
    <h1>Home</h1>
    <Link to="/about">About</Link>
    </div>
  )
}

export default Home;

Javascript相关问答推荐

IOS(React Native)中未找到模块SquareReaderSDK

二维数组，过滤并返回带有索引而不是值的新数组

访客柜台的风格React.js

如何使用JavaScript动态地将CSS应用于ToDo列表？

在时间轴完整日历中显示日期标题

如何解决CORS政策的问题

基于变量切换隐藏文本

Spring boot JSON解析错误：意外字符错误

colored颜色 检测JS，平均图像 colored颜色 检测JS

成功完成Reducers后不更新状态

切换时排序对象数组，切换不起作用

我们如何从一个行动中分派行动

在带有背景图像和圆形的div中添加长方体阴影时的重影线

使用JQuery单击元素从新弹出窗口获取值

不能将空字符串传递给cy.containes()

如何在ASP.NET项目中使用Google Chart API JavaScript将二次轴线值格式化为百分比

如何将未排序的元素追加到数组的末尾？

是否可以在Photoshop CC中zoom 路径项？

向数组中的对象添加键而不改变原始变量

如何在FiRestore中的事务中使用getCountFromServer