导航栏导致其他组件无法在 React Router 中加载答案

【问题标题】：Navbar causing other components to not load in React Router导航栏导致其他组件无法在 React Router 中加载
【发布时间】：2020-06-26 13:18:58
【问题描述】：

我正在设置一个基本的导航栏，它只有一些按钮，没有任何复杂的日志或任何东西。当我在开关内有这个导航栏时，没有其他组件加载，这意味着我不能在某些组件之间包装导航栏，当我在开关外有导航栏时，它可以工作，我可以检查 props.match.location etc 是“/”，而不是在主页上加载它，所以我找到了一个解决方法，但是可能导致这个错误，或者它是预期的行为，我怀疑我的 wildroutes，但不是 100% 确定是什么。我在哪里使用导航栏


const App = () => {
    return (
        <div>
            <Router>
                <Switch>
                    <Route component={theNavbar} />

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

【问题讨论】：

我已经回滚了你的edit。用噪音代替您的问题内容是不可接受的，尤其是在您收到并接受答案之后。一旦在此发布，根据本站服务条款，内容属于 SO。请参阅help center 了解更多信息。

标签： javascript node.js reactjs express react-router

【解决方案1】：

这是完全预期的行为，由几个因素引起。第一个是Switch，第二个是匹配任何Route 的导航。

Switch

呈现与位置。

所有后续匹配都不会渲染。

Route path

没有路径的路由总是匹配的。

<Route component={theNavbar} />

此路线匹配所有位置，因此将始终匹配。在 Switch 中排在第一位意味着它会始终呈现。

始终呈现 some 导航组件同时仍匹配 other 路由的解决方案是将该组件移到 Switch 之外但仍在 Router 内。

【讨论】：

这完全有道理，但如果我不想在主页中呈现它，最佳实践是什么？目前在导航栏上我告诉它，“嘿，如果 props.location.pathname 是 "/" ，渲染 null ”似乎工作正常，这看起来像一个“黑客”还是一个好的解决方案
这与我在与我合作的公司的生产应用程序中使用的标题组件类似。我们的 header 组件实际上会根据路由呈现几个不同的元素。

【解决方案2】：

这是预期的行为。根据React Router documentation：

没有路径的路由总是匹配的。

因此，您的 NavBar 将始终在 <Switch> 中匹配，并且不会呈现任何其他组件。

【讨论】：