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

Question

我创建了一个网站作为 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;`

Answer 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>
  );
}