Question

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

我尝试制作一个组件APP，该组件包装在提供程序中，并具有登录页面的路由和其他路由。这不起作用。

Root.js

const store = configureStore()

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

App.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上任何页面的登录页面。

Answer 1

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" />
}

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

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

1 个答案: