在 React.js 中的两个组件之间创建链接 [关闭]

Posted 2023-02-22

【中文标题】在 React.js 中的两个组件之间创建链接 [关闭]

【英文标题】：Create link between two component in React.js [closed]

【发布时间】：2021-12-11 07:24:15

【问题描述】：

我创建了一个网站作为 React 学习的学习项目。每当我单击导航栏按钮时，我都想从一个组件导航到另一个组件。

例如，如果有人点击联系人，他们需要导航到以下联系人信息，如图所示。

导航栏是一个组件，而联系人是另一个组件。两者也处于不同的道路上。

first component

second component

如果您需要我提供的任何其他信息，请告诉我。

//This is NavBar component location src/component/Contact.js

import classes from "./NavBar.module.css";
import  Link, Router  from "react-router-dom";

const NavBar = (props) => 
  return (
      <div className=classes.navbar>
        <li className=classes.li>
          <Link className=classes.a to="/Contact">
            Contact
          </Link>
        </li>
      </div>
  );
;

export default NavBar;


//This is Contact component location src/component/Contact.js

import classes from "./Contact.module.css";
import  Router, Route  from "react-router-dom";

function Contact() 
  return (
      <footer>
        <div className=classes.contact>
        <p>Contact Me</p>
    </div>
      </footer>
  );


export default Contact;


//This is App Component Location src/UI/App.js

import NavBar from "./components/NavBar";
import Contact from "./components/Contact";


import classes from "./App.module.css";
import  Router, Route  from "react-router";

function App() 
  return (
    <div className=classes.appcontrol>
    <NavBar />
    <Route path="/Contact">
      <Contact />
    </Route>
    </div>
  );


export default App;`

【问题讨论】：

你试过什么？你应该只需要渲染一个Link 组件。 ***.com/help/minimal-reproducible-example

我尝试了 组件，但它给了我一个错误。 “TypeError：无法读取未定义的属性（读取'位置'）”。不确定在哪里添加 组件。

请告诉我们您的代码在做什么。我们无法帮助调试我们看不到的代码。

我添加了代码。

【参考方案1】：

您只需要一个 Router 组件来包装您的应用程序即可提供路由上下文。移除包裹NavBar 和Contact 组件的路由器，在App 中添加一个，或者将App 自身包裹在渲染的位置。

您可以在App 中将Contact 渲染为Route。

导航栏

const NavBar = (props) => 
  return (
    <div className=classes.navbar>
      <li className=classes.li>
        <Link className=classes.a to="/contact">
          Contact
        </Link>
      </li>
    </div>
  );
;

联系方式

function Contact() 
  return (
    <footer>
      <div className=classes.contact>
        <p>Contact Me</p>
      </div>
    </footer>
  );

应用程序

import NavBar from "./components/NavBar";
import Contact from "./components/Contact";
import classes from "./App.module.css";
import  BrowserRouter as Router, Route  from "react-router-dom";

function App() 
  return (
    <Router>
      <div className=classes.appcontrol>
        <NavBar />
        <Route path="/contact">
          <Contact />
        </Route>
      </div>
    </Router>
  );

【讨论】：

它仍然给我一个错误。 TypeError：无法读取未定义的属性（读取“位置”）新路由器 F:/modules/Router.js:20 17 |超级（道具）； 18 | 19 | this.state = > 20 |位置：props.history.location | ^ 21 | ; 22 | 23 | // 这有点小技巧。我们必须开始监听位置视图编译

@RAHULpathak 哪个组件试图通过道具访问该位置？由于您正在设置this.state，因此我假设它是某处的类组件，但您共享的代码是函数组件。您能否编辑您的问题以包含这些新的详细信息？

我的代码中有 statefull 组件。所有组件都是无状态的。

@RAHULpathak 是的，似乎至少有一个类组件具有状态。

嗨 Drew Reese 我发现了这个问题。问题是在 App.js 中导入 。我是从“react-router”导入的；它应该来自像这样的“react-router-dom”。从 'react-router-dom' 导入 BrowserRouter 作为路由器，路由 ；无论如何，谢谢你的帮助。