Javascript 如何在带有React路由器的交换机中放置div？

我有一个使用React和Redux的应用程序，我想在用户输入无效路由时加载

NotFound

组件。我在网上找到了一种解决这个问题的方法，那就是把所有路由放在一个交换机内，包括

NotFound

组件

问题是，在我的应用程序中，我不能将所有路由放在交换机中，因为只有一个组件需要延伸到整个页面，而所有其他组件都需要放在“容器”中。按照下面的方式（请参见代码），

NotFound

组件适用于所有情况，但我在“着陆”组件路线上时除外（此时

NotFound

组件始终显示）

我试图将登录组件放入带有“container”div的

开关中，但应用程序崩溃了

有什么办法解决这个问题吗？（将平台部件放在容器外，其他部件放在容器内）

类应用程序扩展组件{
render（）{
返回(
);
}
}
您可以为除登录页以外的所有其他组件制作单独的路由器

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

//App.js
从“./NonLandingPages”导入NonLandingPages；
类应用程序扩展组件{
render（）{
返回(
);
}
}

所有其他页面的单独路由器

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

//NonLandingPages.js
类NonLandingPages扩展组件{
render（）{
返回(
);
}
}

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