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

Question

I am trying to set up a login page for my app, but when I try to redirect using this.props.history.push the new page does not render. My app uses redux which wraps my main file AsyncApp with Provider. AsyncApp has all my routes wrapped with various navigation bars that appear on every page. Now I am trying to do a login page but I don't know how to implement its route in my application since its route does not use the navigation bars therefore it will not reside in AsyncApp. I dont want to rename all my existing pages because the login page is the only page that does use the navigation bars.

I have tried making a component APP that is wrapped my the provider and has a route for the login page and the other routes. This isn't working.

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

I expect to be able to keep AsyncApp how it is while being able to have a login page that can redirect to any page on AsyncApp.

Answer 1

1) Wrap the entire app around a router so you don't have to have multiple routers set up:

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

2) Utilize the Switch function to route your pages

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) In your SignIn component add a state variable called redirect that you set to true if you are signed in. Then

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

This will set up your routes and allow you to do your redirects w/out manipulating the window and refreshing the app