转换后反应 <Redirect> 不起作用答案

【问题标题】：React <Redirect> after transition not working转换后反应 <Redirect> 不起作用
【发布时间】：2019-12-23 05:25:25
【问题描述】：

我有以下组件，它在动画完成后具有重定向路线，如下所示：

Menus.jsx

class Menus extends Component{
  constructor (props) {
    super(props);
    this.state = { 
        select: 'espresso',      
        isLoading: false,
        redirect: false
    };

  gotoCoffee = () => {
    this.setState({isLoading:true})
    setTimeout(()=>{
      this.setState({isLoading:false,redirect:true})
    },5000)  //Replace this time with your animation time
  }

  renderCoffee = () => {
    if (this.state.redirect) {
      return (<Redirect to={`/coffee/${this.state.select}`} />)
    }
  }

  render(){
    return (
      <div>
        <h1 className="title is-1"><font color="#C86428">Menu</font></h1>
        <hr/><br/>
        <div>
           {this.state.isLoading && <Brewing />}
           {this.renderCoffee()}
          <div onClick={this.gotoCoffee} 
               style={{textDecoration:'underline',cursor:'pointer'}}>
              <strong><font color="#C86428">{this.state.coffees[0]}</font></strong></div>
        </div>
      </div>
    );       
  }
}

export default withRouter(Menus);

动画名为onCLick：

Brewing.jsx

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import './css/mug.css'

class Brewing extends Component {
    constructor (props) {
    super(props);
  };
    render() {
        return (
            <div>
              <div className="cup">
                <div className="coffee"></div>
              </div>
              <div className="smoke"></div>
            </div>
        );
    }
}

export default withRouter(Brewing);

这里重定向路由组件：

Coffee.jsx

class Coffees extends Component{
  constructor (props) {
    super(props);
    this.state = {
        select:'',
        template:''
    };
  };
  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.getCoffee();
    }
  };
  getCoffee(event) {
    //const {userId} = this.props
    const options = {
      url: `${process.env.REACT_APP_WEB_SERVICE_URL}/coffee/espresso`,
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    };
    return axios(options)
    .then((res) => {
      console.log(res.data.data)
      this.setState({
        template: res.data.data[0].content
      })
    })    
    .catch((error) => { console.log(error); });
  };

    render(){
        var __html = this.state.template;
        var template = { __html: __html };

        return (
           <div id="parent">
           <h1 className="title is-1"><font color="#C86428">{this.state.select} playlist</font></h1>
            <hr/><br/>
            <div dangerouslySetInnerHTML={template}/>
          </div>
        );
    }
}

export default withRouter(Coffees);

但 Menus.jsx 中的<Redirect> 不起作用....浏览器中的网址发生变化，但没有任何反应；仅当我刷新浏览器时/coffee 已成功挂载。

我真正需要发生的事情：

渲染菜单
点击链接
点击呈现动画
动画完成后，5 秒后，
<Redirect> 到 /coffee

我错过了什么？

【问题讨论】：

你能添加一个代码框，它更容易帮助运行代码。您是否忘记关闭您的`菜单组件`构造函数括号`}？

标签： javascript reactjs

【解决方案1】：

您还需要在componentDidUpdate 函数中调用getCoffee 函数。

  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.getCoffee();
    }
  };
  componentDidUpdate() {
    if (this.props.isAuthenticated) {
      this.getCoffee();
    }
  };

【讨论】：

【解决方案2】：

您的重定向应该在render() 内。

render(){
    if(this.state.redirect) {
        return(<Redirect to={`/coffee/${this.state.select}`} />)
    } else {
        return ( 
            <div>
               ...your component
            </div> ); 
    }
}

请注意，这样您就不需要 renderCoffee() 函数。

我在移动设备上，所以我无法测试它是否有效。让我知道这是否适合您。

【讨论】：

这不起作用...您必须在答案中包含过渡部分，该部分已被忽略。随着您的回答过渡消失

【解决方案3】：

您的 Menu 组件构造函数似乎没有右括号。

...

class Menus extends Component{
  constructor (props) {
    super(props);
    this.state = { 
        select: 'espresso',      
        isLoading: false,
        redirect: false
    };
  } // did you miss this?

gotoCoffee = () => {

...

【讨论】：

缺少的 { 是错字，没有语法问题

【解决方案4】：

当您说 浏览器中的 url 更改但没有任何反应时；仅当我刷新浏览器/coffee 已成功挂载。

这可能是您的Routes 的问题。

当你redirect 到路径/coffee/${this.state.select} 时，你应该有Route 来处理这个路径。

<Route path="/coffee/:select?" render={() => ( <Coffees isAuthenticated={true}/> )}/>

注意：注意将exact 属性添加到Route。当您添加 exact 属性时，这意味着您的路径应该与所有提供的参数完全匹配。

【讨论】：