Как поместить div внутри коммутатора с React Router? - PullRequest
Новая
       40

Как поместить div внутри коммутатора с React Router?

0 голосов
/ 18 сентября 2018

У меня есть приложение, использующее React и Redux, и я хотел загрузить компонент NotFound, когда пользователь вводит неверный маршрут.Я нашел в Интернете способ решить эту проблему, заключив все маршруты внутри коммутатора, включая компонент NotFound.Проблема в том, что в моем приложении я не могу поместить все свои маршруты в коммутатор, потому что есть один компонент, который нужно растянуть на всю страницу, тогда как все остальные компоненты должны быть внутри «контейнера».Как показано ниже (см. Код), компонент NotFound работает для всех случаев, кроме случаев, когда я нахожусь на маршруте «приземления» (где всегда отображается компонент NotFound).Я попытался поместить компонент посадки внутрь коммутатора с помощью «контейнера», но приложение вылетало.Есть ли способ решить это?(держать посадочный компонент вне контейнера, а другие компоненты внутри) 

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Navbar />
            <Route exact path="/" component={Landing} />
            <div className="container">
              <Switch>
                <Route exact path="/register" component={Register} />
                <Route exact path="/login" component={Login} />
                <Route exact path="/profiles" component={Profiles} />
                <Route exact path="/profile/:handle" component={Profile} />
                <PrivateRoute exact path="/dashboard" component={Dashboard} />
                <PrivateRoute
                  exact
                  path="/create-profile"
                  component={CreateProfile}
                />
                <PrivateRoute
                  exact
                  path="/edit-profile"
                  component={EditProfile}
                />
                <PrivateRoute
                  exact
                  path="/add-experience"
                  component={AddExperience}
                />
                <PrivateRoute
                  exact
                  path="/add-education"
                  component={AddEducation}
                />
                <PrivateRoute
                  exact
                  path="/edit-education/:id"
                  component={EditEducation}
                />
                <PrivateRoute exact path="/feed" component={Posts} />
                <PrivateRoute exact path="/post/:id" component={Post} />
                <Route component={NotFound}/>
              </Switch>
            </div>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

1 Ответ

0 голосов
/ 18 сентября 2018

Вы можете сделать отдельный маршрутизатор для всех других компонентов, кроме целевой страницы. 

// App.js
import NonLandingPages from './NonLandingPages';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Navbar />
            <Switch>
                <Route exact path="/" component={Landing} />
                <Route component={NonLandingPages}/>
            </Switch>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

Отдельный маршрутизатор для всех остальных страниц 

// NonLandingPages.js
class NonLandingPages extends Component {
  render() {
    return (
        <div className="container">
            <Switch>
                <Route exact path="/register" component={Register} />
                <Route exact path="/login" component={Login} />
                <Route exact path="/profiles" component={Profiles} />
                <Route exact path="/profile/:handle" component={Profile} />
                <PrivateRoute exact path="/dashboard" component={Dashboard} />
                <PrivateRoute
                  exact
                  path="/create-profile"
                  component={CreateProfile}
                />
                <PrivateRoute
                  exact
                  path="/edit-profile"
                  component={EditProfile}
                />
                <PrivateRoute
                  exact
                  path="/add-experience"
                  component={AddExperience}
                />
                <PrivateRoute
                  exact
                  path="/add-education"
                  component={AddEducation}
                />
                <PrivateRoute
                  exact
                  path="/edit-education/:id"
                  component={EditEducation}
                />
                <PrivateRoute exact path="/feed" component={Posts} />
                <PrivateRoute exact path="/post/:id" component={Post} />
                <Route component={NotFound}/>
            </Switch>
        </div>
    );
  }
}
...