使用React-Router可以抽象链接声明吗？

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;