我正在按按钮点击事件进行路由
redirect(){
return <Redirect to='/chat' />;
}
它不起作用。
我的主页基础组件:
import React, { Fragment } from 'react';
render() {
const { value } = this.state;
return (
<Router>
<div>
<Switch>
<Route exact={true} path="/" component={Home} />
<Route path="/notify" component={Notify} />
<Route path="/chat" component={Chat}/>
</Switch>
</div>
<footer className="foot">
<BottomNavigation className="navbar navbar-default navbar-static-bottom navbar-fixed-bottom" value={value} onChange={this.handleChange} className={this.props.root}>
<div className="navi">
<Link to="/"> <BottomNavigationAction label="Home" value="Home" icon={<HomeIcon />} /></Link>
</div>
<div className="navi">
<Link to="/notify"><BottomNavigationAction label="Notification" value="Notification" icon={<NotifyIcon />} /></Link>
</div>
<div className="navi">
<Link to="/chat"> <BottomNavigationAction label="Listen" value="Listen" icon={<LocationOnIcon />} /></Link>
</div>
</BottomNavigation>
</footer>
我必须从子组件重定向到另一个组件, 这是我的孩子组件:
<IconButton className={this.props.iconButton} aria-label="Search" onClick={this.redirect}>
<SearchIcon />
</IconButton>
redirect(){
return <Redirect to='/chat' />;
}
所以,但是我也没有收到任何控制台错误。
答案 0 :(得分:2)
<Redirect />
是一个组件。因此,您应该像这样使用它。
class App extends React.Component{
state = {
isRedirect: false,
}
redirect = () => {
this.setState({ isRedirect: true });
}
render() {
return (
<>
<button onclick={this.redirect}> Redirect</button>
{this.state.isRedirect ? <Redirect to="/" /> : null }
</>
)
}
}
OR
您可以使用 history API
但是您应该添加withRouter()
class App extends React.Component{
render(){
return(
<>
<button onClick={()=>{this.props.history.push('/')}}>Redirect</button>
</>
)
}
}
export default withRouter(App);