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

2024-04-30 • 问答

请考虑以下内容：

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

有什么缺点吗？

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

这正是我始终创建导航栏的方式。 <Link>就像普通的<a>标签一样，除了它将URL推送到历史记录堆栈，而不是像<a>标签那样向服务器发出请求。

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

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

大家都在问