如何使用 React Router 创建嵌套的 Tab 路由

2020-05-18 08:00:00 · 飞浪

介绍许多开发人员习惯于在Web应用中将冗余数据隐藏在标签后面。然而，重要的是要确保定义此类标签不会导致数据无法访问，尤其是当用户收藏甚至分享链接时。由于网络上的共享通常通过URL进行，

介绍

许多开发人员习惯于在 Web 应用中将冗余数据隐藏在标签后面。然而，重要的是要确保定义此类标签不会导致数据无法访问，尤其是当用户收藏甚至分享链接时。由于网络上的共享通常通过 URL 进行，因此作为开发人员，您必须实施一种技术来在用户点击标签时检索标签。无论它是绝对路径还是单纯的查询参数。

幸运的是，React Router 可以解决这个问题，它不仅支持标签页，还支持标准 React 模式。本指南将介绍如何使用 React Router 创建具有动态路径的嵌套标签页路由。

设置路由器

首先要做的事情：首先设置路由器来呈现您的应用。导入BrowserRouter并简单地呈现一个Switch以在路由之间进行选择。实际上，您只有一个路由，您将为其分配路径/home，而组件实际上是您的App。

      import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";

const routes = (
  <BrowserRouter>
    <Switch>
      <Route path="/home" component={App} />
      <Redirect from="/" to="/home" />
    </Switch>
  </BrowserRouter>
);

ReactDOM.render(routes, document.getElementById("root"));
    

不要让Redirect吓到你。它只是用来在导航到/时重定向到主路由。

创建标签

在App.js文件中创建选项卡。请记住，这些选项卡将成为您的选项卡路由，因此将成为您根据其 URL 呈现的组件。

      const Profile = () => <div>You're on the Profile Tab</div>;
const Comments = () => <div>You're on the Comments Tab</div>;
const Contact = () => <div>You're on the Contact Tab</div>;
    

如你所见，这些组件是常见的功能 React 组件。

创建链接

下一步是设置将充当选项卡控件的链接。将to链接设置为绝对路径。事实上，这就是您必须在/comments和/contact中包含/home的原因。您已使用上面的重定向解决了/问题。

      import { Link } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hey welcome home!</h1>
        <div className="links">
          <Link to={`/`} className="link">Profile</Link>
          <Link to={`/home/comments`} className="link">Comments</Link>
          <Link to={`/home/contact`} className="link">Contact</Link>
        </div>
      </div>
    );
  }
}
    

设置嵌套选项卡

现在，是时候设置您的标签了。您不需要在标签上配置静态路由，因为 React Router 允许您在任何地方设置路由。设置您的路径路由以映射到您的链接。

请注意，第一条路线上的exact属性表示严格匹配。换句话说，您必须准确位于/home才能位于“个人资料”选项卡。exact属性不用于呈现其他选项卡路线。

      import { Switch, Route, Link } from "react-router-dom";

<div className="tabs">
  <Switch>
    <Route path={`/home`} exact component={Profile} />
    <Route path={`/home/comments`} component={Comments} />
    <Route path={`/home/contact`} component={Contact} />
  </Switch>
</div>
    

使标签路由动态化

上述方法非常静态，也就是说，您需要将路线设置为绝对路径。因此，如果您后来决定将基本路线从/home更改为另一条路线，则必须编辑包含该路线的每条路线。

为了避免这种麻烦，请根据上面匹配的路由动态配置您的路由路径。使用match属性替换您在<Route path="/home" component={App} />中定义的内容。

      render() {
  const { path } = this.props.match;

  return (
    <div>
      <h1>Hey welcome home!</h1>
      <div className="links">
        <Link to={`${path}`} className="link">Profile</Link>
        <Link to={`${path}/comments`} className="link">Comments</Link>
        <Link to={`${path}/contact`} className="link">Contact</Link>
      </div>
      <div className="tabs">
        <Switch>
          <Route path={`${path}`} exact component={Profile} />
          <Route path={`${path}/comments`} component={Comments} />
          <Route path={`${path}/contact`} component={Contact} />
        </Switch>
      </div>
    </div>
  );
}
    

如上所示，to是在Link中动态设置的。你设置的Route选项卡也是根据match.path动态配置的。因此，你可以为每个单独的选项卡附加想要匹配的额外路径。

这种技术的优点不仅限于动态路由。您现在还可以重复使用标签。例如，如果您需要呈现具有不同顶部和匹配结尾的标签路由，则可以重复使用标签并自动仅更改顶层。

更改顶层

无论您在顶层定义什么，您都可以重复使用选项卡。以下示例演示如何将路径从/home更改为/crazyCoolNewRoute。

      const routes = (
  <BrowserRouter>
    <Switch>
      <Route path="/crazyCoolNewRoute" component={App} />
      <Redirect from="/" to="/crazyCoolNewRoute" />
    </Switch>
  </BrowserRouter>
);
    

结论

本指南介绍了 React Router 的基础知识。现在您知道如何创建选项卡、链接和嵌套选项卡。您还学习了如何通过更改顶层来重用选项卡。这仅仅是个开始，因为 React Router 的潜力是无限的。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何使用 React Router 创建嵌套的 Tab 路由

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom"; const routes = ( <BrowserRouter> <Switch> <Route path="/home" component={App} /> <Redirect from="/" to="/home" /> </Switch> </BrowserRouter> ); ReactDOM.render(routes, document.getElementById("root"));

import { Link } from "react-router-dom"; class App extends Component { render() { return ( <div> <h1>Hey welcome home!</h1> <div className="links"> <Link to={`/`} className="link">Profile</Link> <Link to={`/home/comments`} className="link">Comments</Link> <Link to={`/home/contact`} className="link">Contact</Link> </div> </div> ); } }

import { Switch, Route, Link } from "react-router-dom"; <div className="tabs"> <Switch> <Route path={`/home`} exact component={Profile} /> <Route path={`/home/comments`} component={Comments} /> <Route path={`/home/contact`} component={Contact} /> </Switch> </div>

render() { const { path } = this.props.match; return ( <div> <h1>Hey welcome home!</h1> <div className="links"> <Link to={`${path}`} className="link">Profile</Link> <Link to={`${path}/comments`} className="link">Comments</Link> <Link to={`${path}/contact`} className="link">Contact</Link> </div> <div className="tabs"> <Switch> <Route path={`${path}`} exact component={Profile} /> <Route path={`${path}/comments`} component={Comments} /> <Route path={`${path}/contact`} component={Contact} /> </Switch> </div> </div> ); }

const routes = ( <BrowserRouter> <Switch> <Route path="/crazyCoolNewRoute" component={App} /> <Redirect from="/" to="/crazyCoolNewRoute" /> </Switch> </BrowserRouter> );