有没有一种方法可以在React.js上将href标签转换为链接？

Question

感谢您提前打开此页面。 我是一名自学成才的程序员。现在，我正在使用Bootstrap制作个人网页。

我现在想要做的是React.js的SPA功能。我所理解的这个功能是：

1. 安装“react-router-dom”； 2. 导入 { Link, NavLink } from "react-router-dom"; 3. 将那些锚点和href标签替换为Link to= 以下代码位于'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;

App.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;

一旦我替换掉

，这句话与IT技术有关。

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

to

<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. 我应该先不使用Bootstrap开始工作。一旦SPA功能完成，然后我可以开始使用CSS in JS（例如：const something = div.styled ``;）来处理CSS特性。

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

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

我目前正在依赖这个文档页面来消除错误消息。 第一个示例：基本路由 - https://reactrouter.com/web/guides/quick-start

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

- mireumireu

---

谢谢你回答问题！现在我明白了错误信息的意思，它表示需要一个标签来包含它所需的内容。我最好确保同时包含导入的内容和声明返回函数的内容。 - mireumireu

Answer 1

这是一个好问题，但为了给出最佳答案，您需要使用多个文件进行操作，我相信您已经意识到了。

首先，假设您使用了create-react-app，请转到index.js文件，并使用react-router-dom的BrowserRouter组件包装第一个参数中的所有内容。它应该看起来像下面这样：

index.js

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>,
  document.getElementById("root")
);

接下来，您需要使用react-router-dom的Switch组件来包装整个应用程序的路由。 App.js

import { Route, Switch } from "react-router";

import Navbar from "./components/Navbar";
import Header from "./components/Header";
import About from "./components/About";

// Particles component removed for explanation
function App() {
  return (
   <Navbar />
   <Header />

   // When a link is clicked, the component will appear within the following div,
   // so if you want certain elements to stay where they are on the page, wrap
   // and place the Switch component accordingly.
   <div className='pages'>
     <Switch>
       <Route path='/about' component={About} />
       <Route path='/profile' component={profile} />
       <Route path='/thoughts' component={Thoughts} />   
       <Route path='/contacts' component={Contacts} />
     </Switch>
   </div>

  );
}

export default App;

现在，在任何 App 子组件中，您都可以使用 react-router-dom 的 Links（我个人更喜欢使用 NavLink，因为它易于进行样式设置）。以下是操作步骤：

Navbar.js

import { NavLink } from "react-router-dom";

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

     <NavLink className="navbar-brand mr-auto" to='/home'>
        <img className="logo" src={logoImage} alt="logoImage"/>
     </NavLink
      <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">
           <NavLink className="nav-link active" to='/about'>About me</NavLink>
         </li>
          <li className="nav-item">
            <NavLink className="nav-link" to='/thoughts'>Thoughts</NavLink>
          </li>
          <li className="nav-item">
            <NavLink className="nav-link" to='/portfolio'>Portfolio</NavLink>
          </li>
          <li className="nav-item">
            <NavLink className="nav-link" to='/contacts'>Contacts</NavLink>
          </li>
       </ul>
    </div>
   </div>
  </nav>
 )
};

export default Navbar;

按照以下步骤，您将能够使用react-router-dom在页面中导航。

- WyattH7

---

你的回答对我来说就像黑暗中的一座灯塔！感谢你展示了react-router-dom的工作流程。 - mireumireu

Answer 2

是的，你可以这样做，这个错误发生是因为你忘记用<Router>包装<Link>组件...

如果你想在整个项目中都使用它，你可以简单地这样做:

    <Router>
  <App />
</Router>

例子：

   <Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>

    {/* A <Switch> looks through its children <Route>s and
        renders the first one that matches the current URL. */}
    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </div>
</Router>

- Anees Hikmat Abu Hmiad

---

你的解释让我知道了应该关注的重点。非常感谢你回答我的问题！ - mireumireu

Answer 3

Router 是由 react-router-dom 提供的组件。正如错误所说，Link 可以在 Router 内部使用。

另外，Link 的路径应该是实际浏览器 URL，而不是组件的路径。理想的方式是为每个组件添加路由。

例如，您的 App 可以像这样：（仅供参考）

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

- Jagrati

---

谢谢你回答问题 :) 我不会忘记你在这里解释的基础知识。 - mireumireu