时间戳

首页 > 解决方案 > 如何在 react-redux 应用程序中设置嵌套路由？

javascript - 如何在 react-redux 应用程序中设置嵌套路由？

问题描述

我正在尝试为我的应用程序设置登录页面，但是当我尝试使用 this.props.history.push 重定向时，新页面不会呈现。我的应用使用了 redux，它用 Provider 包装了我的主文件 AsyncApp。AsyncApp 将我所有的路线都包裹在每个页面上出现的各种导航栏中。现在我正在尝试做一个登录页面，但我不知道如何在我的应用程序中实现它的路由，因为它的路由不使用导航栏，因此它不会驻留在 AsyncApp 中。我不想重命名所有现有页面，因为登录页面是唯一使用导航栏的页面。

我尝试制作一个组件 APP，它包装了我的提供程序，并具有登录页面和其他路由的路由。这是行不通的。

根.js

const store = configureStore()

export default class Root extends Component {
  render() {
      return (
        <Provider store={store}>
          <App />
        </Provider>
      )
  }
}

应用程序.js

export default class App extends Component {
  render() {
    let arr = window.location.pathname.split('/');
    let loc = arr[1];
    if(loc === 'signin'){
      return (
          <Router>
            <Route exact path="/signin" component={SignIn} />
          </Router>
      )
    } else {
        return (
          <AsyncApp />
        )
    }
  }
}

AsyncApp.js

class AsyncApp extends Component {

  render() {
    const { classes } = this.props
    return (
      <ThemeProvider theme={theme}>
        <div className={classes.root}>
          <CssBaseline />
          <nav className={classes.drawer}>
            <Hidden xsDown implementation="css">
              <Navigator PaperProps={{ style: { width: drawerWidth } }} />
            </Hidden>
          </nav>
          <div className={classes.appContent}>
            <Header onDrawerToggle={this.handleDrawerToggle} />
            <main className={classes.mainContent}>
              <div>
                <Router>
                  <Route exact path="/EditContracts/:contractId/sections/:section" component={EditSection} />
                  <Route exact path="/EditContracts/:contractId" component={EditContract} />
                  <Route exact path="/EditUsers/:userId" component={EditUser} />
                  <Route exact path="/EditEndpoints/:epId" component={EditEndpoint} />
                  <Route exact path="/EditContracts/:contractId/addSection" component={CreateSection} />
                  <Route exact path="/Contracts/List" component={Contracts} />
                  <Route exact path="/Contracts/Create" component={CreateContract} />
                  <Route exact path="/Contracts/Import" component={ImportContract} />
                  <Route exact path="/Users/List" component={Users} />
                  <Route exact path="/Users/Create" component={CreateUser} />
                  <Route exact path="/Endpoints/Create" component={CreateEndpoint} />
                  <Route exact path="/Endpoints/List" component={Endpoints} />
                </Router>
              </div>
            </main>
          </div>
        </div>
      </ThemeProvider>
    )
  }
}

我希望能够保持 AsyncApp 的状态，同时能够拥有一个可以重定向到 AsyncApp 上任何页面的登录页面。

标签： javascriptreactjsreduxreact-router

解决方案

1）将整个应用程序包裹在路由器周围，这样您就不必设置多个路由器：

export default class Root extends Component {
  render() {
      return (
        <Provider store={store}>
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </Provider>
      )
  }
}

2）利用切换功能来路由您的页面

export default class App extends Component {
  render() {
    <Switch>
       <Route exact path="/signin" component={SignIn} />
       <Route path="/" component={AsyncApp} />
    </Switch>
  }
}

class AsyncApp extends Component {
      ...
                <Switch>
                  <Route exact path="/EditContracts/:contractId/sections/:section" component={EditSection} />
                  <Route exact path="/EditContracts/:contractId" component={EditContract} />
                  <Route exact path="/EditUsers/:userId" component={EditUser} />
                  <Route exact path="/EditEndpoints/:epId" component={EditEndpoint} />
                  <Route exact path="/EditContracts/:contractId/addSection" component={CreateSection} />
                  <Route exact path="/Contracts/List" component={Contracts} />
                  <Route exact path="/Contracts/Create" component={CreateContract} />
                  <Route exact path="/Contracts/Import" component={ImportContract} />
                  <Route exact path="/Users/List" component={Users} />
                  <Route exact path="/Users/Create" component={CreateUser} />
                  <Route exact path="/Endpoints/Create" component={CreateEndpoint} />
                  <Route exact path="/Endpoints/List" component={Endpoints} />
                </Switch>
             ...

3）在您的SignIn组件中添加一个名为的状态变量redirect，如果您已登录，则将其设置为 true。然后

if (redirect) {
  return <Redirect to="path/to/redirect" />
}

这将设置您的路线并允许您在不操作窗口和刷新应用程序的情况下进行重定向

推荐阅读