react-router-dom 重定向不重定向到我想要的组件，但它正在重定向到不同的路径

Question

Versions

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",

I have an issue where my conditional Redirect component is not working as it should. Is it because it's outside of the Switch component. I want it to redirect to the /error route if apiError is true. The conditional works since I tested with just the Error component and not the error route. The Redirect component also works since the path does change but the component is not rendered.

render() {
    const { currentUser, isLoaded, apiError } = this.state;
    return ( 
      <Router>
        {currentUser ? (
          <div className='App'>
            <Switch>
              <Route exact path='/title/:id' render={props => <ShowTitle {...props} /> } />
              <Route exact path='/shuffle' render={props => <Titles {...props} isLoaded={isLoaded} /> } />
              <Route exact path='/about' render={props => <About {...props} /> } />
              <Route exact path='/all-titles' render={props => <Titles {...props} isLoaded={isLoaded} /> } />
              <Route exact path='/error' render={props => <Error {...props} />} />
              <Route exact path='/' render={props => <Redirect to={'/' + currentUser.viewType} /> } />
              <Route exact path='/logout' component={Logout} />
              <Redirect to='/all-titles' />
            </Switch>
          </div>
        ) : apiError ? <Redirect to='/error' /> : (
          <Landing isLoaded={this.state.isLoaded}></Landing>
        )}
      </Router>
    );

Answer 1

I'm seeing a logical error with it.

<Route exact path='/error' render={props => <Error {...props} />} />

Doesn't exist when apiError .

This probably work for you:

render() {
    const { currentUser, isLoaded, apiError } = this.state;
    let route = (<Landing isLoaded={isLoaded} />);
    if (currentUser) {
      route = (
        <div className='App'>
          <Switch>
            <Route exact path='/title/:id' render={props => <ShowTitle {...props} /> } />
            <Route exact path='/shuffle' render={props => <Titles {...props} isLoaded={isLoaded} /> } />
            <Route exact path='/about' render={props => <About {...props} /> } />
            <Route exact path='/all-titles' render={props => <Titles {...props} isLoaded={isLoaded} /> } />
            <Route exact path='/error' render={props => <Error {...props} />} />
            <Route exact path='/' render={props => <Redirect to={'/' + currentUser.viewType} /> } />
            <Route exact path='/logout' component={Logout} />
            <Redirect to='/all-titles' />
          </Switch>
        </div>
      );
    }
    if (apiError) {
      route = (
        <Switch>
          <Route exact path='/error' render={props => <Error {...props} />} />
        </Switch>
      );
    }
    return ( 
      <Router>
        {route}
      </Router>
    );
};

For better usage, I recommend to you declare all routes statically, on HOC module, then validate props and use Redirect component to navigate to other path.