Reactjs：如何从每个现有 URL 中删除 page-not-found 组件？答案

【问题标题】：Reactjs: How do I remove the page-not-found component from every existing URL?Reactjs：如何从每个现有 URL 中删除 page-not-found 组件？
【发布时间】：2020-02-19 08:53:36
【问题描述】：

我正在构建 React 应用程序。
如果用户键入了错误的 URL，则会显示 NoMatch 组件（这很好）。

挑战是当用户键入现有 URL 时，会显示两个组件。 NoMatch 组件和预期组件都出现了。

注意：我在 stackoverflow 上发现了一些关于此的问题，但没有一个解决方案对我有用。我正在使用<PrivateRoute> 和react-router-dom。

App.js

<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 path="*" component={NoMatch}/>
                    </main>
                </div>
            </Fragment>
        </Switch>
    </Router>
</Provider>

PrivateRoute.js

const PrivateRoute = ({component: Component, auth, ...rest}) => (
    <Route
        {...rest}
        render={props =>
            auth.isAuthenticated ? (
                <Component {...props} />
            ) : (
                <Redirect
                    to={{
                        pathname: "/login",
                        state: {from: props.location}
                    }}
                />
            )
        }
    />
);

这就是我的问题。

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

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

Switch 仅适用于它的直接子级，当您在其中添加 Fragment 之类的内容时，Switch 将失去对其中 Route 组件的影响。

在您的情况下，您可以简单地将 Switch 移动到内部以包含 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>

【讨论】：

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

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

从中删除路径

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

【讨论】：