Javascript 使用react路由器隐藏组件是否有最佳实践方法？

要隐藏主组件上的导航栏，我将执行以下操作

const NavbarComponent = (props) => {
    console.log(props);

    if (props.match.path === '/') {
        return null;
    } else
        return (

它工作正常，我需要访问路由器，以便我可以根据props对象将人员发送到不同的位置，是否有更好的方法使所有路由器逻辑都位于同一位置

这是我的路由器的当前状态

    return (
        <div>
            <Router>
                <Route component={Navbar} />

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

                    <Route exact path="/api/:city/electronics" component={Electronics} />
                    <Route exact path="/api/:city/labour" component={Labour} />

                    <Route exact path="/api/posts/item/:id" component={ItemDetails} />

                    <Route exact path="/create/:city/:category" component={CreatePost} />
                </Switch>
            </Router>
        </div>
    );

返回(
);

---

谢谢您的时间。

我不知道为什么您的

导航栏

组件位于它自己的

路线中。路由器中包含的任何组件都可以访问整个路由器api，包括
链接
——它们不需要是路由即可访问

我建议用该组件包装所有包含
NavBar
的路由。然后，路线将显示为导航栏组件的子项

以下是一个简化的示例：

// App.js
return (
    <div>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <NavBar>
            <Route exact path="/electronics" component={Electronics} />
            <Route exact path="/labour" component={Labour} />
          </NavBar>
        </Switch>
      </Router>
    </div>
  );

//NavBar.js
return (
    <>
      <div>
        <Link to="/electronics">Electronics</Link>
        <Link to="/labour">Labour</Link>
      </div>
      <div>{props.children}</div>
    </>
  );

//App.js
返回(
);
//NavBar.js
返回(
数码产品
劳动
{props.children}
);

什么是props.children？你包装的组件
NavBar
。对不起，我对此感到困惑，通常我使用react路由器根据我发送的路由进行路由，我通常不使用链接，所以{props.children}只是向我解释一下，“无论你想链接那些路线，我们只是在导航栏中包装了它们，将它们放在这里“，是吗？@jcx3x是App.js中从路由器包装的
路由
s，但它们可以是任何包装的组件。在导航栏标记之间放置的任何活动JSX都将被导航栏组件呈现为
props.children
，实际上是该组件的子组件。您可以在其中放置一个
标记，该标记也将被呈现。不管您是使用链接还是重定向，还是将路径推送到历史对象，路由器都会以同样的方式响应。当路由由于路径与url匹配而变为活动时，它将通过
props.children
呈现。