0

考虑以下：

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

有什么缺点吗？

4

2 回答 2

2

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

就像 'react-router-dom' 'react-router'之上的包装器，你已经 'react-router-dom' 在你的代码库中使用了

  • 有什么缺点吗？

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

应用程序.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>
  );
}

链接Nav.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;
于 2019-11-05T04:01:32.313 回答
1

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

于 2019-11-05T02:25:38.363 回答