React-router 的学习和使用

在React 中 处处皆组件！！ Router 这也是一个组件，有点不怎么好用

一： 安装 react-router-dom

npm install react-router-dom

二: 简单使用方法

在 src/app.js 中 用以下代码

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams,
  NavLink 
} from "react-router-dom";

import "./App.css"

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <NavLink activeClassName="hurray" to="/">Home</NavLink>
          </li>
          <li>
            <NavLink activeClassName="hurray" to="/about">About</NavLink>
          </li>
          <li>
            <NavLink activeClassName="hurray" to="/topics">Topics</NavLink>
          </li>
        </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route exact  path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Topics() {
  let match = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <NavLink activeClassName="hurray" to={`${match.url}/components`}>Components</NavLink>
        </li>
        <li>
          <NavLink activeClassName="hurray" to={`${match.url}/props-v-state`}>
            Props v. State
          </NavLink>
        </li>
      </ul>

      {/* The Topics page has its own <Switch> with more routes
          that build on the /topics URL path. You can think of the
          2nd <Route> here as an "index" page for all topics, or
          the page that is shown when no topic is selected */}
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  let { topicId } = useParams();
  return <h3>Requested topic ID: {topicId}</h3>;
}

三： Router 详解

3.1 Router 的引入

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

因此需要在 把根组件包囊在 router 组件内部

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")
);

3.2 Router 的匹配

使用 Switch， Route 这两个组件 来匹配路由。

的独特之处在于它专门呈现一条路由。使用

的话，每个与位置匹配的 都将包含在内。

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")
);

3.3 路由跳转

React Router提供了一个>组件来在您的应用程序中创建链接。无论在何处呈现>，锚点()都将呈现在HTML文档中。

<Link to="/">Home</Link>
// <a href="/">Home</a>


//The <NavLink> is a special type of <Link> that can style itself as “active” when its to prop matches the current location.
<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>

-------------本文结束 感谢您的阅读-------------

相关文章

点击查看

• 为react 项目添加 scss 和 ts

react-router react

为react 项目添加 scss 和 ts