Блог

Я пытаюсь вызвать перенаправление, когда 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

Я собрал рабочий пример. Взгляните:

 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 amp;amp; (
          <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>
  );
}