Javascript 反应<；重定向>；过渡后不工作

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

菜单.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);

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);  

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);

这里是重定向路由组件：

Coffee.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);

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);  

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);

class咖啡扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选择：“”，
模板：“”
};
};
componentDidMount（）{
如果（此.props.isAuthenticated）{
这是我的咖啡；
}
};
getCoffee（活动）{
//const{userId}=this.props
常量选项={
url:“${process.env.REACT\u APP\u WEB\u SERVICE\u url}/coffee/espresso”，
方法：“get”，
标题：{
“内容类型”：“应用程序/json”，
授权：`Bearer${window.localStorage.authToken}`
}
};
返回axios（选项）
。然后（（res）=>{
console.log（res.data.data）
这是我的国家({
模板：res.data.data[0]。内容
})
})    
.catch（（错误）=>{console.log（错误）；}）；
};
render（）{
var\uuu html=this.state.template；
变量模板={{uuuuhtml:{uuuuhtml}；
返回(
{this.state.select}播放列表


);
}
}
使用路由器导出默认值（咖啡）；

但是

在菜单中。jsx不起作用…url在浏览器中更改，但什么也没有发生；只有在刷新浏览器时，才能成功安装

/coffee

---

我真正需要做的是：

渲染菜单

点击链接

单击渲染动画

动画完成后，5秒后

至

/coffee

---

我缺少什么？

您需要在

componentdiddupdate

函数中调用

getCoffee

函数

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

---

您的重定向应该在

render（）

中

render（）{
if（this.state.redirect）{
返回（）
}否则{
报税表（
…您的组件
); 
}
}

注意，这样您就不需要

renderOffee（）

函数了

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

---

我使用手机，所以无法测试它是否有效。让我知道这是否适合您。

您的菜单组件构造函数似乎没有右括号

...

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

gotoCoffee = () => {

...

当你们说url在浏览器上改变了，但什么也没发生；只有在刷新浏览器时，才能成功安装

/coffee

这可能是您的

路线的问题

当您将
重定向到路径
/coffee/${this.state.select}
时，您应该有
路由
来处理此路径

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

（）}/>

注意：注意将
exact
道具添加到
Route
。当您添加
exact
prop时，这意味着您的路径应该与提供的所有参数完全匹配。
您是否可以添加一个codesandbox，这将更容易帮助处理可运行的代码。您是否忘记关闭“菜单组件”构造函数括号“
”
？缺少的“{是一个拼写错误，没有语法问题。这不起作用…您必须在答案中包含不规则的转换部分。随着答案的消失，转换消失了