时间戳

首页 > 解决方案 > 反应路由器更改网址但不导航到页面

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

问题描述

我在更改与 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>

标签： javascriptreactjsreact-router-dom

解决方案

这里的问题是第二个 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} />

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

推荐阅读