Reactjs：如何从每个现有URL中删除页面未找到组件？

我正在构建react应用程序。
如果用户键入错误的URL，将显示

NoMatch

组件（这很好）。

挑战是当用户键入现有URL时，将显示两个组件。

NoMatch

组件和预期组件都会出现。

注意：我在stackoverflow上发现了一些关于这方面的问题，但没有一个解决方案适合我。我正在使用

和

反应路由器dom

App.js

privaterout.js

const privaterote=（{component:component，auth，…rest}）=>(
验证了吗(
) : (
)
}
/>
);

这就是我的问题。

---

知道我做错了什么吗？我没有得到我想要的结果吗？

一种方法是为“正确”路径添加一个包装组件，它有一个检查，如果路径名是正确路径之一，则渲染其子路径，否则渲染组件。快速示例：

<WrappingComponent>
  <Route component={Home} exact path='/' />
  <Route component={SomePage} path='/some-page' />
</WrappingComponent>

然后在包装组件路径名中检查：

  if (this.props.location.pathname === '/' ||
    this.props.location.pathname === '/some-page') {
      return this.props.children;
  } else {
    return <NoMatch />;
  }

if（this.props.location.pathname==='/）||
this.props.location.pathname=='/some page'）{
返回此.props.children；
}否则{
返回；
}

从中删除路径

<Provider store={store}>
    <Router>
        <Switch>
            <Route exact path="/login" component={Login}/>
            <Fragment>
                <Navigationbar/>
                <div className="main-part">
                    <Sidebar/>
                    <main className="content shrunk-sidebar">
                        <PrivateRoute path="/" exact component={Home}/>
                        <PrivateRoute path="/files" exact component={Files}/>
                        <PrivateRoute path="/new_app" exact component={NewApp}/>
                        <PrivateRoute path="/applications/:app_name" exact component={Application} />
                        <PrivateRoute  component={NoMatch}/>
                    </main>
                </div>
            </Fragment>
        </Switch>
    </Router>
</Provider>

---

开关

仅适用于其直接子级，当您在其内部添加类似于

片段的内容时，开关将失去对其内部
路由
组件的影响

在您的情况下，只需将
开关
移到内部，即可包含
PrivateRoute
组件的数组，使其工作

<Provider store={store}>
    <Router>
        <Switch>
            <Route exact path="/login" component={Login}/>
            <Fragment>
                <Navigationbar/>
                <div className="main-part">
                    <Sidebar/>
                    <main className="content shrunk-sidebar">
                        <Switch>
                            <PrivateRoute path="/" exact component={Home}/>
                            <PrivateRoute path="/files" exact component={Files}/>
                            <PrivateRoute path="/new_app" exact component={NewApp}/>
                            <PrivateRoute path="/applications/:app_name" exact component={Application}/>
                            <PrivateRoute path="*" component={NoMatch}/>
                        </Switch>
                    </main>
                </div>
            </Fragment>
        </Switch>
    </Router>
</Provider>

我稍微修改了您的答案，使代码适合我。