时间戳

首页 > 解决方案 > 导航栏导致其他组件无法在 React Router 中加载

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

问题描述

我正在设置一个基本的导航栏，它只有一些按钮，没有任何复杂的日志或任何东西。当我在开关内有这个导航栏时，没有其他组件加载，这意味着我不能在某些组件之间包装导航栏，当我在开关外有导航栏时，它可以工作，我可以检查 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>
    );
};

标签： javascriptnode.jsreactjsexpressreact-router

解决方案

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

Switch

渲染第一个孩子<Route>或<Redirect>与该位置匹配的孩子。

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

Route path

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

<Route component={theNavbar} />

此路线匹配所有位置，因此将始终匹配。Switch在一个意味着它总是会呈现的第一个被列出。

始终呈现某些导航组件同时仍匹配其他路由的解决方案是将该组件移到.SwitchRouter

推荐阅读