重定向依赖于使用反应的ajax结果

Posted 2023-02-22

【中文标题】重定向依赖于使用反应的ajax结果

【英文标题】：redirect dependent on ajax result using react

【发布时间】：2019-08-11 05:46:43

【问题描述】：

如果成功的数据有一定的价值，我想重定向到一个组件。 当ajax返回数据时，取决于重定向到我之前导入的Contents类的数据的值。 我一直在寻找有关 push 方法的信息 我的错误是：Error: Invariant failed: You should not use <Redirect> outside a <Router>

 import React,  Component  from 'react';
    import  Modal,Button  from 'react-bootstrap';
    import $ from 'jquery'; 
    import   Redirect  from 'react-router';
    import Contents from './Contents';
    class Login extends Component 
        constructor(props, context) 
            super(props, context);

            this.handleShow = this.handleShow.bind(this);
            this.handleClose = this.handleClose.bind(this);
            this.handleloginClick = this.handleloginClick.bind(this);
            this.handleUsernameChange = this.handleUsernameChange.bind(this);
            this.handlePasswordChange = this.handlePasswordChange.bind(this);

            this.state = 
              show: true,
              username: "",
              password: "",
            ;
          

          handleloginClick(event) 
          var parametros = 
            username: this.state.username,
            password: this.state.password
          
          const  history  = this.props;

          $.ajax(
            data: parametros,
            url: "https://privada.mgsehijos.es/react/login.php",
            type: "POST",
            success: function (data) 
               
          );   
      

      handleUsernameChange(event) 
            this.setState(username: event.target.value);
        

        handlePasswordChange(event) 
          this.setState(password: event.target.value);
      
        handleClose() 
        this.setState( show: false );
      

      handleShow() 
        this.setState( show: true );
      

         render() 


    If(Condicion)     
         return (<Redirect to='./Contents' />);
       
 return (
          //Here my modal.
     );
              
          
          export default Login;

【问题讨论】：

Automatic redirect after login with react-router的可能重复

【参考方案1】：

你可以使用Router dom来导航。

我的小提琴：https://jsfiddle.net/leolima/fLnh9z50/1/

const AboutUs = (props) => 
    
  console.log(props.location.state)
  console.log('Hi, you are in About page, redirecting with router dom in 3 seconds')
  
  setTimeout(() => 
  props.history.push('/'), 3000);
    
  return <h1>Now we're here at the about us page.</h1>;
;

完整示例：

// Select the node we wish to mount our React application to
const MOUNT_NODE = document.querySelector('#app');

// Grab components out of the ReactRouterDOM that we will be using
const  BrowserRouter, Route, Switch, NavLink, Link  = window.ReactRouterDOM;

// PropTypes is used for typechecking
const PropTypes = window.PropTypes;

// Home page component
const Home = () => 
  return <h1>Here we are at the home page.</h1>;
;

// AboutUs page component
const AboutUs = (props) => 
    
  console.log(props.location.state)
    
  return <h1>Now we're here at the about us page.</h1>;
;

// NotFoundPage component
// props.match.url contains the current url route
const NotFoundPage = ( match ) => 
    const url = match;
  
    return (
    <div>
      <h1>Whoops!</h1>
      <p><strong>url.replace('/','')</strong> could not be located.</p>
    </div>
    );
;


// Header component is our page title and navigation menu
const Header = () => 
    // This is just needed to set the Home route to active 
  // in jsFiddle based on the URI location. Ignore.
    const checkActive = (match, location) => 
    if(!location) return false;
    const pathname = location;
    
    return pathname.indexOf('/tophergates') !== -1 || pathname.indexOf('/_display/') !== -1;
  
  
  return (
    <header>
      <h1>Basic React Routing</h1>
      <nav>
        <ul className='navLinks'>
          /* Your home route path would generally just be '/'' */
          <li><NavLink to="/tophergates" isActive=checkActive>Home</NavLink></li>
          <li><Link to=
            pathname: "/about",
            state:  fromDashboard: true 
          >About</Link></li>
        </ul>
      </nav>
    </header>
  );
;


// Out layout component which switches content based on the route
const Layout = (children) => 
  return (
    <div>
      <Header />
      <main>children</main>
    </div>
  );
;

// Ensure the 'children' prop has a value (required) and the value is an element.
Layout.propTypes = 
  children: PropTypes.element.isRequired,
;

// The top level component is where our routing is taking place.
// We tell the Layout component which component to render based on the current route.
const App = () => 
  return (
    <BrowserRouter>
      <Layout>
        <Switch>
          <Route path='/tophergates' component=Home />
          <Route path='/_display/' component=Home />
          <Route exact path='/' component=Home />
          <Route path='/about' component=AboutUs />
          <Route path='*' component=NotFoundPage />
        </Switch>
      </Layout>
    </BrowserRouter>
  );
;

// Render the application
ReactDOM.render(
    <App />, 
  MOUNT_NODE
);