是否有使用反应路由器隐藏组件的最佳实践方法？

Question

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

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>
    );

感谢您的宝贵时间。

Answer 1

我不确定我是否理解为什么您的 NavBar 组件在它自己的 Route 中。 Router 中包含的任何组件都可以访问整个 Router api，包括 Link - 它们不需要是 Route 即可。

我建议使用该组件包装所有包含NavBar 的路由。然后，Routes 将显示为 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>
    </>
  );

codesandbox