阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      create-react-app 添加 react-router-dom(Router/ 路由)

      添加 Router(路由)

      Create React App 并未规定特定的 Router(路由)解决方案,但 React Router 是最受欢迎的 Router(路由) 解决方案。

      要添加它,请运行:

      npm install --save react-router-dom
      

      简单的例子

      基本示例 是开始尝试的好地方。

      import React from "react";
      import {
        BrowserRouter as Router,
        Switch,
        Route,
        Link
      } from "react-router-dom";
      
      // This site has 3 pages, all of which are rendered
      // dynamically in the browser (not server rendered).
      //
      // Although the page does not ever refresh, notice how
      // React Router keeps the URL up to date as you navigate
      // through the site. This preserves the browser history,
      // making sure things like the back button and bookmarks
      // work properly.
      
      export default function BasicExample() {
        return (
          <Router>
            <div>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/dashboard">Dashboard</Link>
                </li>
              </ul>
      
              <hr />
      
              {/*
                A <Switch> looks through all its children <Route>
                elements and renders the first one whose path
                matches the current URL. Use a <Switch> any time
                you have multiple routes, but you want only one
                of them to render at a time
              */}
              <Switch>
                <Route exact path="/">
                  <Home />
                </Route>
                <Route path="/about">
                  <About />
                </Route>
                <Route path="/dashboard">
                  <Dashboard />
                </Route>
              </Switch>
            </div>
          </Router>
        );
      }
      
      // You can think of these components as "pages"
      // in your app.
      
      function Home() {
        return (
          <div>
            <h2>Home</h2>
          </div>
        );
      }
      
      function About() {
        return (
          <div>
            <h2>About</h2>
          </div>
        );
      }
      
      function Dashboard() {
        return (
          <div>
            <h2>Dashboard</h2>
          </div>
        );
      }
      

      更多案例,请参考

      https://reacttraining.com/react-router/web/example/url-params

      请注意,在部署应用程序之前,你可能需要配置生产服务器以支持客户端路由

      目录
      目录