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);
动画名为onCLick
:
酿造.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);
这里重定向路由组件:
咖啡.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);
但<Redirect>
在Menus.jsx中不起作用....浏览器中的 url 更改但没有任何反应;仅当我刷新浏览器/coffee
成功安装时。
我实际需要发生的事情:
- 渲染菜单
- 点击一个链接
- 单击呈现动画
- 动画完成后,5秒后,
<Redirect>
至/coffee
我错过了什么?
解决方案
当您在浏览器上说 url 更改但没有任何反应时;仅当我刷新浏览器/coffee
成功安装时。
这可能是您的Routes
.
当您redirect
到 path/coffee/${this.state.select}
时,您应该必须Route
处理此路径。
<Route path="/coffee/:select?" render={() => ( <Coffees isAuthenticated={true}/> )}/>
注意:注意将exact
prop 添加到Route
. 当您添加exact
道具时,这意味着您的路径应与所有提供的参数完全匹配。
推荐阅读
- mysql - 如何在查询的 WHERE 部分使用定义的 AS 别名?
- d3.js - C3 - 在折线图上添加自定义标签
- xamarin - webview上的打印按钮不起作用
- sorting - 我想检查比较运算符是真还是假
- javascript - 带有附加版本号的 gzip .js 和 .css 文件
- java - 如何在 tess4j 4.1 版中将字符列入白名单。*
- c# - 如何在 JObject 的 StreamReader 中列出所有“项目”?
- hadoop - 如何格式化NameNode?
- spring - Spring/GitHub/Docker - 错误:jarfile 无效或损坏
- python - 清理 Python 输出显示