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

IT技术 javascript reactjs react-router react-router-dom
2021-05-23 19:32:53

我有一个使用 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>
    );
  }
}
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>
    );
  }
}
其它你可能感兴趣的问题
上一篇在本机react中，如何将 base64 图像转换为 jpg 然后保存到临时路径？ 下一篇如何将 http 重定向到 https 以获取 AWS Elb 后面的 reactJs SPA？