美文网首页
React Router 使用

React Router 使用

作者: Miss_Ella | 来源:发表于2021-01-07 17:05 被阅读0次

    什么是React Router

    许多现代网站实际上是由一个页面组成的,它们看起来就像多个页面,因为它们包含呈现为单独页面的组件。 这些通常称为SPA-单页应用程序。 从根本上说,React Router的作用是根据URL中使用的路由(在首页中为/,在About页面中为/ about等),有条件地渲染某些组件以进行显示。
    例如我们可以通过React Router将 www.myurl.com/www.myurl.com/about 或者 www.myurl.com/shop 链接起来。
    那怎么做到这些呢?先看下React Router的基本组件:

    React Router 组件

    现在的React Router版本中已不需要路由配置,现在一切皆组件。

    ReactRouter中提供了以下三大组件:

    • Router是所有路由组件共用的底层接口组件,它是路由规则制定的最外层的容器。
    • Route路由规则匹配,并显示当前的规则对应的组件。
    • Link路由跳转的组件

    当然每个组件下又会有几种不同的子类组件实现。比如: Router组件就针对不同功能和平台对应用:

    • <BrowserRouter> 浏览器的路由组件
    • <HashRouter> URL格式为Hash路由组件
    • <MemoryRouter> 内存路由组件
    • <NativeRouter> Native的路由组件
    • <StaticRouter> 地址不改变的静态路由组件

    React Router 设计

    1. 安装包
    npm install react-router-dom
    
    1. 创建router, 参考官方例子
      在App.js 中放入以下代码
    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>
      );
    }
    

    运行出来后的页面如下:


    image.png

    点击about 跳转到/about 页面,如下


    image.png

    React Router 主要组件

    React Router中的组件主要分为三类:

    • 路由器,例如<BrowserRouter>和<HashRouter>
    • 路由匹配器,例如<Route>和<Switch>
    • 导航,例如<Link>,<NavLink>和<Redirect>

    将导航组件视为“路线更改器”,在Web应用程序中使用的所有组件都应从react-router-dom导入。

    Routers

    每个React Router应用程序的核心应该是路由器组件。 对于Web项目,react-router-dom提供<BrowserRouter>和<HashRouter>路由器。 两者之间的主要区别是它们存储URL和与Web服务器通信的方式。

    • <BrowserRouter>使用常规URL路径。 这些通常是外观最好的URL,但是它们要求正确配置服务器。 具体来说,Web服务器需要在所有由React Router客户端管理的URL上提供相同的页面。 Create React App在开发中即开即用地支持此功能,并附带有关如何配置生产服务器的说明。
    • <HashRouter>将当前位置存储在URL的哈希部分中,因此URL看起来类似于http://example.com/#/your/page。 由于哈希从不发送到服务器,因此这意味着不需要特殊的服务器配置。

    要使用路由器,只需确保将其呈现在元素层次结构的根目录下即可。 通常,您会将顶级<App>元素包装在路由器中,如下所示:

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter } from "react-router-dom";
    
    function App() {
      return <h1>Hello React Router</h1>;
    }
    
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );
    
    

    Route Matchers

    有两个router matcher: SwitchRoute。如果使用了 <Switch>,它将搜索其子<Route>元素,以查找其路径与当前URL匹配的元素。 当找到一个时,它将渲染该<Route>并忽略所有其他路由。 这意味着应将有比较具体path匹配规则的<Route>放置在比较模糊匹配规则的<Route>前面。
    如果没有<Route>匹配,则<Switch>不渲染任何内容(null)

    import React from "react";
    import ReactDOM from "react-dom";
    import {
      BrowserRouter as Router,
      Switch,
      Route
    } from "react-router-dom";
    
    function App() {
      return (
        <div>
          <Switch>
            {/* If the current URL is /about, this route is rendered
                while the rest are ignored */}
            <Route path="/about">
              <About />
            </Route>
    
            {/* Note how these two routes are ordered. The more specific
                path="/contact/:id" comes before path="/contact" so that
                route will render when viewing an individual contact */}
            <Route path="/contact/:id">
              <Contact />
            </Route>
            <Route path="/contact">
              <AllContacts />
            </Route>
    
            {/* If none of the previous routes render anything,
                this route acts as a fallback.
    
                Important: A route with path="/" will *always* match
                the URL because all URLs begin with a /. So that's
                why we put this one last of all */}
            <Route path="/">
              <Home />
            </Route>
          </Switch>
        </div>
      );
    }
    
    ReactDOM.render(
      <Router>
        <App />
      </Router>,
      document.getElementById("root")
    );
    

    需要注意的是<Route path>匹配URL的开头,而不是整个开头。 因此,<Route path =“ /”>将始终与URL匹配。 因此,我们通常将此<Route>放在<Switch>的最后。 另一种可能的解决方案是使用匹配整个URL的 <Route exact path="/">。注意:尽管React Router确实支持在<Switch>之外渲染<Route>元素,但从5.1版本开始,我们建议使用useRouteMatch hook代替。 此外,我们不建议呈现不带路径的<Route>,而是建议使用hook来访问所需的任何变量。

    Navigation (or Route Changers)

    React Router提供了一个<Link>组件来在应用程序中创建链接。 无论在何处render<Link>,都会在HTML文档中渲染anchor(<a>)
    <NavLink>是<Link>的一种特殊类型,当其prop与当前位置匹配时,可以将其自身设置为“active”。

    <Link to="/">Home</Link>
    // <a href="/">Home</a>
    <NavLink to="/react" activeClassName="hurray">
      React
    </NavLink>
    
    // When the URL is /react, this renders:
    // <a href="/react" className="hurray">React</a>
    
    // When it's something else:
    // <a href="/react">React</a>
    <Redirect to="/login" />
    

    任何时候要强制navigation,都可以使用<Redirect>。 声依永<Redirect>时,它将使用其 to prop进行导航。

    参考

    相关文章

      网友评论

          本文标题:React Router 使用

          本文链接:https://www.haomeiwen.com/subject/bjbzoktx.html