ReactJS 应用程序不使用 react-router-dom 呈现

Question

我是 ReactJS 的新手，我正在尝试创建一个具有主页和关于页面的应用程序。我希望能够通过单击导航栏中相应的 anchor/link 在两个页面之间切换。
在将 BrowserRouter 和相关元素添加到我的代码之前，一切都呈现良好，但现在网页上没有任何呈现。
我使用的 react-router-dom 版本是 react-router-dom@6.2.1.

这是我的 index.js 文件：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

App.js 使用 Bootstrap 示例：

import React from "react";
import { Link, BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./About";


export default function App() {
    return (
<div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <Link class="navbar-brand" to="/"><i class="bi bi-yin-yang"></i></Link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                <li class="nav-item">
                    <Link class="nav-link active" aria-current="page" to="/">Home</Link>
                </li>
                <li class="nav-item">
                    <Link class="nav-link" to="/about">About Us</Link>
                </li>
                </ul>
            </div>
        </div>
    </nav>

    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />} />
            <Route path="/about" element={<About />} />
        </Routes>
    </BrowserRouter>

</div>
);
};

这里是 About.js 文件：

import { Fragment } from "react";

export default function About() {
    return (
<Fragment>
    
    <h1>About Us</h1>

</Fragment>
);
};

最后，Home.js 文件：

import { Fragment } from "react";

export default function About() {
    return (
<Fragment>
    
    <h1>Home</h1>

</Fragment>
);
};

我尝试遵循一些关于使用 ReactJS 进行路由的指南并搜索其他答案，但没有成功。我不知道我做错了什么。感谢您的宝贵时间。

Answer 1

使用路由 / 在路由器内部调用 App 会导致无限循环。

你的路由器应该是这样的

    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/about" element={<About />} />
        </Routes>
    </BrowserRouter>

不要忘记重新命名您的主页组件的函数名称

import { Fragment } from "react";

export default function Home() {
    return (
<Fragment>
    
    <h1>Home</h1>

</Fragment>
);
};

在专用组件中添加导航可能是一个很好的添加。

Answer 2

应该将链接移动到路由器中，这样它就可以知道更新匹配和呈现的路由。每个应用程序只需要一个路由器来提供路由上下文，因此请确保您的应用程序的其他地方没有呈现其他路由器。

您还应该修复在您的主 "/" 路径上渲染的组件，即它应该是 Home 而不是再次递归渲染 App。

export default function App() {
  return (
    <BrowserRouter>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <Link class="navbar-brand" to="/">
            <i class="bi bi-yin-yang"></i>
          </Link>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <Link class="nav-link active" aria-current="page" to="/">
                  Home
                </Link>
              </li>
              <li class="nav-item">
                <Link class="nav-link" to="/about">
                  About Us
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

ReactJS 应用程序不使用 react-router-dom 呈现

ReactJS app doesn't render using react-router-dom

javascript

reactjs

react-router-dom