反应路由器更改网址但不导航到页面

Question

我在更改页面以响应 react-router-dom 时遇到问题。这是我的路由器：-

import { Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from '../pages/grocery';
import Profile from '../pages/profile';
import CheckoutPage from '../pages/checkout';
export default function Routes(props) {
  return (
      <BrowserRouter>
        <Switch>
          <Route path="/" name="Home" component={HomePage} exact />
          <Route path="/profile" name="Profile" component={Profile} />
          <Route path="/checkout" name="Checkout" component={CheckoutPage} />
        </Switch>
    </BrowserRouter>

  );
}

这是我的链接标签

<Link to="/profile">Profile</Link>

Answer 1

这里的问题是第二个 Route 元素也有一个“/”，第一个将访问任何以“/”开头的元素。 如何解决这个问题？ 使用 Route 您可以将“精确”放在路径之前，因此它只会访问该特定路线，无论之后发生什么。 示例：

<Route exact path="/" name="Home" component={HomePage} />
<Route exact path="/profile" name="Profile" component={Profile} />
<Route exact path="/checkout" name="Checkout" component={CheckoutPage} />

这样您在访问其他页面或组件时不会遇到问题。