javascript - 如何使用 React Router 将 div 放入 Switch 中？

Question

我有一个使用 React 和 Redux 的 APP，我想NotFound在用户输入无效路由时加载一个组件。我在网上找到了解决这个问题的方法，就是把所有的路由都放在一个交换机里面，包括NotFound组件。

问题是，在我的应用程序中，我不能将所有路由都放在 Switch 中，因为有一个组件需要拉伸到整个页面，而所有其他组件都需要放在“容器”中。我在下面的方式（参见代码），该NotFound组件适用于所有情况，除非我在“着陆”组件路线上（NotFound组件始终显示）。

我试图Switch用“容器” div 将登陆组件放在里面，但应用程序崩溃了。

有没有办法解决这个问题？（将着陆组件放在容器外，其他组件放在容器内）

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

标签： javascriptreactjsreact-routerreact-router-dom

Answer 1

您可以为除登录页面之外的所有其他组件制作单独的路由器。

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