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

Question

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

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

导航栏是一个组件，联系人是另一个组件。两者的路径也不同。

第一个组件

第二组件

如果你需要我这边的其他信息，请告诉我。

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