Javascript 为什么不'；根据路线渲染的t组件？

我正在使用react路由器，我已经创建了一个路径为

/account

的路由，该路径呈现account组件。该组件渲染导航栏。在导航栏下面，我希望它根据URL呈现不同的组件。如果URL是

account/edit

我想显示编辑帐户组件，如果URL是

account/myorders

我想显示我的订单组件，最后如果URL是

account/favorites

我想在导航栏下面显示收藏夹组件

• 编辑帐户
• 我的命令
• 最爱

现在我有一个问题，url改变了，但是没有组件呈现在我的导航栏下面。如果我在

/account

路线上使用精确路径，我会在路线

/edit

、

/myorders

和

/favorites

上得到“路径不存在”。如果我没有在

/account

路线上使用exact，则所有路线上都会显示相同的视图。获取要渲染的组件的唯一时间是，如果我将上的路由更改为，例如

/edit

到

/

function Routes() {
  return (
    <Switch>
      <Route path="/" component={Home} exact />

      <Route path="/account" component={Account} />

      <Route render={() => <Route component={Error} />} />
    </Switch>
  );
}

函数路由（）{
返回(
} />
);
}

这些是导入到我的App.js组件中的已存在的有效路由

const Account = () => {
  return (
    <Router>
      <NavBar />
      <Switch>
        <Route path="/edit" component={EditAccount} exact />
        <Route path="/myorders" component={MyOrders} />
        <Route path="/favorites" component={Favorites} />
      </Switch>
    </Router>
  );
};

const账户=（）=>{
返回(
);
};

---

这些是my Account.js组件中不起作用的路由

问题在于您正在使用

将

路由

包装到

组件中

试着去掉它，像这样：-

const Account = () => {
  return (
      <NavBar />
      <Switch>
        <Route path="/edit" component={EditAccount} exact />
        <Route path="/myorders" component={MyOrders} />
        <Route path="/favorites" component={Favorites} />
      </Switch>
  );
};

const账户=（）=>{
返回(
);
};

更多信息。
我的解决方案是使用这样的嵌套路由

const Account = () => {
  let match = useRouteMatch();

  return (
    <Router>
      <NavBar />
      <h1>Account</h1>
      <Switch>
        <Route path={`${match.path}/edit`} component={EditAccount} exact />
        <Route path={`${match.path}/myorders`} component={MyOrders} />
        <Route path={`${match.path}/favorites`} component={Favorites} />
      </Switch>
    </Router>
  );
};

const账户=（）=>{
让match=useRouteMatch（）；
返回(
账户
);
};
这对我不起作用，但我找到了解决办法。这是为了使用嵌套的路由。