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

Question

考虑以下几点：

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

有什么缺点吗？

Answer 1

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

Answer 2

您可以使用 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;

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

Is it possible to abstract the Link declarations when using React-Router?

reactjs

react-router

react-router-v4

react-component

react-router-component