Reactjs: Как удалить компонент «страница не найдена» из каждого существующего URL?

Question

Я создаю приложение реакции. Если пользователь вводит неправильный URL-адрес, отображается компонент NoMatch (это нормально).

Задача заключается в том, что при вводе пользователем существующего URL-адреса отображаются два компонента. Появятся компонент NoMatch и ожидаемый компонент.

Примечание. Я нашел несколько вопросов по этому поводу в stackoverflow , но ни одно из решений не помогло мне. Я использую <PrivateRoute> и react-router-dom.

Приложение. 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}
                    }}
                />
            )
        }
    />
);

Это проблема в том, что у меня есть.

Есть идеи, что я делаю неправильно, что я не получаю желаемый результат?

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

Answer 2

Удалить путь из него

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

Answer 3

Одним из способов является добавление компонента обертки для «правильных» путей, который проверяет, что если путь является одним из правильных путей, вы отображаете его дочерние элементы, в противном случае - компонент компонента. Быстрый пример:

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