有什么方法可以将href标记转换为react.js上的链接吗？

Question

谢谢你提前打开这一页。我是一个自学成才的编码器。现在我正在用bootstrap制作我的个人页面。

我现在要做的是；react.js的SPA特性。我所理解的这个特征是；

1. 安装“React-Router-DOM”，
2. 从“React-Router-DOM”导入{Link,NavLink}；
3. 并替换这些锚和href标记以链接到=

下面的代码在'src'文件夹中。

navbar.js

import React from "react";
import logoImage from "../components/logo.png";
// React fontawesome imports
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { Link, NavLink } from "react-router-dom";



const Navbar = () => {
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-white">
        <div className="container-fluid">

            <a className="navbar-brand mr-auto" href="#"><img className="logo" src={logoImage} alt="logoImage"/></a
            <button 
            className="navbar-toggler" 
            type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarSupportedContent" 
            aria-controls="navbarSupportedContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation"
            >
                <FontAwesomeIcon icon={faBars} style={{ color: "#2ff1f2" }}/>
            </button>

            <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav ml-auto">
                    <li className="nav-item">
                        <a className="nav-link active" aria-current="page" href="../components/About">About me</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Thoughts</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Portfolio</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Contacts</a>
                    </li>

                </ul>
                </div>
            </div>
            </nav>
                )
            }

export default Navbar;

应用程序JS

import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import Particles from "react-particles-js";
import Navbar from "./components/Navbar";
import Header from "./components/Header";
import About from "./components/About";

function App() {
  return (
    <>
      <Particles
        className="particles-canvas"
          params={{
            particles: {
            number: {
            value: 30,
            density: {
            enable: true,
            value_area: 900
            }},
            shape: {
            type: "star",
            stroke: {
            width: 6,
            color: "#f9ab00"
            }}}}}
      />
      <Navbar />
      <Header />
      <About />
    </>
  );
}

export default App;

header.js

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

const Header = () => {
    return (
        <div className="header-wraper">
            <div className="main-info">
                <h1>Welcome, this is my own personal page</h1>
                <Typed
                    className="typed-text"
                    strings={["text message to display in the centre of the page"]}
                    typeSpeed={80}
                />
                <a href="#" className="btn-main-offer">Details</a>



        </div>
    </div>
    )
}

export default Header;

一旦我换下

<a className="nav-link" href="#">Thoughts</a> 

至

<Link to="../components/About">Thoughts</Link>

它将停止使用以下错误消息。

×
Error: Invariant failed: You should not use <Link> outside a <Router>
invariant
C:/Users/Administrator/my-portfolio/node_modules/tiny-invariant/dist/tiny-invariant.esm.js:10
(anonymous function)
C:/Users/Administrator/modules/Link.js:88
  85 | return (
  86 |   <RouterContext.Consumer>
  87 |     {context => {
> 88 |       invariant(context, "You should not use <Link> outside a <Router>");
     | ^  89 | 
  90 |       const { history } = context;
  91 | 

我对这个错误的理解是：

1. 我应该在src文件夹中创建router.js文件。
2. 我应该在没有引导的情况下重新开始。完成SPA特性后，我就可以在JS中作为CSS开始处理这个CSS特性（例如，const something=div.styled``；)

我知道这听起来很荒谬，但这是我现在能想到的最好的选择。

问题是，我应该从哪里开始调查这个错误消息？

我当前依赖此文档页删除错误消息。第一个示例：基本路由-https://reactrouter.com/web/guides/quick-start

我很感激你的意见。谢谢.如果我找到了一个解决方案，我会在这里更新它。

Answer 1

Router是React-Router-DOM提供的一个组件，正如错误所说，链接可以在Router内部使用。

此外，链接的路径应该是实际的浏览器url，而不是组件的路径。理想的方法是为每个组件添加路由。

比如你的App可以是这样的：（仅供参考）

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Navbar />
        </Route>
      </Switch>
    </Router>
  );
}