React 路由

创建 React 应用程序不包括页面路由。

React 路由是最流行的解决方案。


添加 React 路由

要在应用程序中添加 React 路由,请从应用程序的根目录在终端中运行此命令:

npm i -D react-router-dom

文件夹结构

要创建具有多个页面路由的应用程序,我们首先从文件结构开始。在 src 文件夹中,我们将创建一个名为 pages 的文件夹,其中包含多个文件:src\pages\:

  • Home.js
  • Blogs.js
  • Contact.js

每个文件将包含一个非常基本的 React 组件:

Home.js:

  1. const Home = () => {
  2. return <h2>Home</h2>;
  3. };
  4. export default Home;

Blogs.js:

  1. const Blogs = () => {
  2. return <h2>Blog Articles</h2>;
  3. };
  4. export default Blogs;

Contact.js:

  1. const Contact = () => {
  2. return <h2>Contact Me</h2>;
  3. };
  4. export default Contact;

基本用法

现在我们将在 index.js 文件中使用路由.

实例

使用 React 路由根据 URL 路由到页面:

index.js:

  1. import ReactDOM from "react-dom";
  2. import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
  3. import Home from "./pages/Home";
  4. import Blogs from "./pages/Blogs";
  5. import Contact from "./pages/Contact";
  6. export default function App() {
  7. return (
  8. <Router>
  9. <div>
  10. <Link to="/">Home</Link>
  11. </div>
  12. <div>
  13. <Link to="/blogs">Blog Articles</Link>
  14. </div>
  15. <div>
  16. <Link to="/contact">Contact Me</Link>
  17. </div>
  18. <hr />
  19. <Switch>
  20. <Route exact path="/">
  21. <Home />
  22. </Route>
  23. <Route path="/blogs">
  24. <Blogs />
  25. </Route>
  26. <Route path="/contact">
  27. <Contact />
  28. </Route>
  29. </Switch>
  30. </Router>
  31. );
  32. }
  33. ReactDOM.render(<App />, document.getElementById("root"));

实例解释

我们先用 <Router> 装我们的内容。

<Link> 用于设置 URL 并跟踪浏览历史记录。

任何时候链接到内部路径时,我们都将使用 <link> 而不是 <a href="">

<Switch>类似于 JavaScript 开关语句。它将有条件地展示与 <Link> 路径匹配的 <Route>