使用 React-Router 时是否可以抽象 Link 声明？答案

【问题标题】：Is it possible to abstract the Link declarations when using React-Router?使用 React-Router 时是否可以抽象 Link 声明？
【发布时间】：2020-03-01 08:37:09
【问题描述】：

考虑以下几点：

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

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

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

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

function NotFound() {
  return <h2>Not found</h2>;
}

function App() {
  return(
    <div>
      <h1>Welcome to Next.js!</h1>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about/">About</Link>
          </li>
          <li>
            <Link to="/users/">Users</Link>
          </li>
          <li>
            <Link to="/people/">People</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
        <Redirect from="/people/" to="/users/" />
        <Route component={NotFound}/>
      </Switch>
    </div>
  );
}

export default App;

有什么东西可以阻止人们这样做吗？

import { Route, Switch } from "react-router-dom";
import LinkNav from './LinkNav'
import { Redirect } from 'react-router'

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

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

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

function NotFound() {
  return <h2>Not found</h2>;
}

function App() {
  return(
    <div>
      <h1>Welcome to Next.js!</h1>
      <nav>
        <LinkNav/>
      </nav>

      <Switch>
        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
        <Redirect from="/people/" to="/users/" />
        <Route component={NotFound}/>
      </Switch>
    </div>
  );
}

有什么缺点吗？

【问题讨论】：

我看不出有什么问题。我一直这样做。如果我可以问，您有什么顾虑？
@euvs 之所以这么问，是因为我正在使用 Next.js，并且在使用带有 Next 的 Link 组件的 Semantic-UI-React 菜单项时遇到了麻烦。 stackoverflow.com/questions/58653701/…所以我正在考虑使用github.com/toomuchdesign/next-react-router

标签： reactjs react-router react-router-v4 react-component react-router-component

【解决方案1】：

您可以使用import { Route, Switch, Redirect } from 'react-router-dom'
而不是import { Redirect } from 'react-router'，

'react-router-dom' 是 'react-router' 之上的包装器，您已经使用过 'react-router-dom' 在您的代码库中

有什么缺点吗？

您已经创建了一个组件，但它不是完全由数据驱动的（如果您需要的话）。你可以重构你的代码来提供你的 LinkNav

App.js

function App() {
  const navBars = [
    { name: "Home", path: "/" },
    { name: "About", path: "/about" },
    { name: "Users", path: "/users" },
    { name: "People", path: "/people" }
  ];
  return (
    <div>
      <h1>welcome</h1>
      <nav>
        <LinkNav data={navBars} />
      </nav>
      <Switch>
        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
        <Redirect from="/people/" to="/users/" />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

linkNav.jsx

import React from "react";
import { Link } from "react-router-dom";
const LinkNav = ({ data }) => {
  return (
    <ul>
      {data.map(nav => (
        <li key={nav.path}>
          <Link to={nav.path}>{nav.name}</Link>
        </li>
      ))}
    </ul>
  );
};

export default LinkNav;

【讨论】：

我最终重新组织了我的导航以与您的回答相称！谢谢塔雷克！！如果可以的话，附带问题；像您图示的导航组件是否应该只处理active 状态和paths？我想让链接响应我的 redux 商店中的更改。例如，根据用户是否登录显示或隐藏链接？换句话说，让组件做太多事情是一种反模式吗？
我认为您可以将数据作为道具传递给您只想在 LinkNav 中显示的人，它不应该影响您的 LinkNav 代码

【解决方案2】：

这正是我创建导航栏的一贯做法。 <Link> 和普通的 <a> 标签一样，只是它将 URL 推送到历史堆栈，而不是像 <a> 标签那样向服务器发出请求。

【讨论】：