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时，您可以在路径前面加上“精确”字样，因此它将仅访问该特定路径，无论之后的内容如何。例如：

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

这样，您访问其他页面或组件就不会有问题。

反应路由器更改URL，但不导航到页面

1 个答案: