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

Posted 2023-02-19

【中文标题】使用 react-router-dom 时功能组件消失

【英文标题】：functional component disappears while using 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标签

【参考方案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