React-router-dom 重定向但不渲染

Question

我试图在this.state.redirect === true 时触发重定向。

       <EuiPage>       
          <Router>            
            <Switch>             
              {this.state.redirect ? <Redirect push to={{pathname: "/",state: { redirect: false }}}/> : null }
              <Route path="/CDI/:id" 
              render={(props) => (
                  <EntityCDI {...props} 
                    props={props}
                    entityQuery={this.entityQuery}
                    results={this.state.results}   
                    redirect={this.state.redirect}                                             
                  />
                )}
              />             
              <Route exact path="/"
                render={(props) => (
                  <SearchResults {...props} 
                    query={this.state.query}
                    error={this.state.error}
                    results={this.state.results}
                    textQuery = {this.state.textQuery}
                    goToPage = {this.page}
                    pages = {this.state.pages}
                    page = {this.state.page}
                    setSize = {this.setSize}
                    size = {this.state.size}
                    start = {this.state.start}
                    end = {this.state.end}
                    total_results = {this.state.total_results}
                    runQuery = {this.query}
                    redirect = {this.state.redirect}
                  />
                )}
              > 
              </Route>                        
            </Switch>
          </Router>
        </EuiPage> 

满足此条件时，浏览器 URL 会更改为 localhost:3000/，但不会呈现任何内容。

简单来说我尝试过的问题：

<EuiPage>       
  <Router>            
    <Switch>             
      {this.state.redirect ? <Redirect push to={{pathname: "/test",state: { redirect: false }}}/> : null }
      <Route path="/test">
        world
      </Route>    
      <Route path="/">
        hello 
      </Route>                        
    </Switch>
  </Router>
</EuiPage> 

hello 在localhost:3000/ 处呈现。当 this.state.redirect === true 浏览器 url 栏显示 localhost:3000/test 但不呈现 world

Answer 1

我整理了一个working example。看看：

import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch
} from "react-router-dom";
import "./styles.css";

const Test = () => {
  const [redirect, setRedirect] = useState();

  return (
    <>
      <button onClick={() => setRedirect(true)}>Redirect</button>
      <Router>
        {redirect && (
          <Redirect to={{ pathname: "/test", state: { redirect: false } }} />
        )}
        <Switch>
          <Route path="/test">world</Route>
          <Route path="/">hello</Route>
        </Switch>
      </Router>
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Test />
    </div>
  );
}