React 路由

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

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

添加 React 路由

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

文件夹结构

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

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

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

Home.js:

const Home = () => {
  return <h2>Home</h2>;
};
export default Home;

Blogs.js:

const Blogs = () => {
  return <h2>Blog Articles</h2>;
};
export default Blogs;

Contact.js:

const Contact = () => {
  return <h2>Contact Me</h2>;
};
export default Contact;

基本用法

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

实例

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

index.js:

import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
export default function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
      </div>
      <div>
        <Link to="/blogs">Blog Articles</Link>
      </div>
      <div>
        <Link to="/contact">Contact Me</Link>
      </div>
      <hr />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/blogs">
          <Blogs />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
      </Switch>
    </Router>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

实例解释

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

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

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

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