阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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

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

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录