使用 react-router-dom 时功能组件消失答案

【问题标题】：functional component disappears while using react-router-dom使用 react-router-dom 时功能组件消失
【发布时间】：2022-01-21 14:54:39
【问题描述】：

我只是想用react-router-dom 做一个简单的项目设置，但每当我使用route 时，整个页面都会变成空白。我的导航消失了。为什么？

对于类组件有一个类似的问题，所以对我没有帮助。

App.js：

import "./App.css";
import Nav from "./components/Nav";
import Products from "./components/Products";
import About from "./components/About";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
  return (
    <>
      <Router>
        <Nav />
        <Route path="/about" component={About} />
        <Route path="/products" component={Products} />
        <About />
      </Router>
    </>
  );
}

export default App;

导航：

import React from "react";
import Navstyle from "../styles/Nav.module.css";
const Nav = () => {
  return (
    <nav className={Navstyle.Nav}>
      <ul className={Navstyle.nav_links}>
        <li>
          <a href="!#">Home</a>
        </li>
        <li>
          <a href="!#">Products</a>
        </li>
        <li>
          <a href="!#">About</a>
        </li>
      </ul>
    </nav>
  );
};

export default Nav;

其他组件只是返回h2标签

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

您需要使用布局（作为 HOC）将导航栏或其他内容添加到您的代码中。只需在路由器中使用带有路由的组件。我建议在另一个文件中定义布局。


export default function App() {
  return (
    <Layout>
      <Router>
        <Route component={Products} path="/products" exact />
        <Route component={About} path="/about" exact />
      </Router>
    </Layout>
  );
}

const Products = () => {
  return <p>Products</p>;
};

const About = () => {
  return <p>about</p>;
};

const Navbar = () => {
  return <p>navbar</p>;
};

const Layout = ({ children }) => {
  return (
    <div>
      <Navbar />
      <div>{children}</div>
    </div>
  );
};

【讨论】：

嗨，我该怎么做？你的意思是我应该在 Nav.js 中做同样的路由工作
我测试过了。但它没有用
相同。消失
更新了答案，请先测试我的代码，然后根据需要重构它
我想我知道了。检查我自己的答案！大声笑我正在回答我自己的问题

【解决方案2】：

我知道了！我猜问题是YouTube视频。首先，您必须将 BrowserRouter 添加到您的 index.js not app.js 中，如下所示：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

之后你必须以这种方式使用 react 路由器，而不是我首先尝试的方式：

import "./App.css";
import Nav from "./components/Nav";
import Products from "./components/Products";
import About from "./components/About";
import { Route, Routes } from "react-router-dom";
function App() {
  return (
    <>
      <Nav />
      <Routes>
        <Route path="/About" element={<About />} />
      </Routes>
    </>
  );
}

export default App;

在第6版react-router-dom的变化中，这是使用路由器的新方式。文档的链接： https://reactrouter.com/docs/en/v6/getting-started/overview

【讨论】：