Question

我遵循了React Router文档https://reacttraining.com/react-router/web/guides/quick-start，并尝试遵循以下代码：

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about" component={About} />
          <Route path="/users" component={Users} />
          <Route path="/" component={Home} />
        </Switch>
      </div>
    </Router>
  );
}

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

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

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

对于<Switch>块，我将这些组件放在下面，浏览器将正常运行。

<Switch>
  <Route path="/about" component={About} />
  <Route path="/users" component={Users} />
  <Route path="/" component={Home} />
</Switch>

但是当我通过将 Home 组件放入第一条路线来重新排列这些组件时：

<Switch>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/users" component={Users} />
</Switch>

即使我将URL更改为/about或/users，浏览器仍将显示 Home 组件。

为什么将组件放置在不同的<Route>位置会导致React Router DOM中的视觉输出不同？

Answer 1

您需要在“ /”路由中添加确切的选项，否则它将始终匹配

<Route exact path="/" component={Home} />

Answer 2

它使用grep来匹配您的路线。只要它碰到第一个匹配的对象，就会显示该对象。

使用选项exact确保路由完全匹配。

为什么将组件放在<Switch>中的不同<Route>位置会导致不同的视觉输出？

2 个答案: