点击事件的反应路由不起作用[重复]

Question

我正在对按钮单击事件进行路由

  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' />;

    }

所以，但我也没有收到任何控制台错误。

Answer 1

<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 }
      </>
    ) 
  }

}

或

您可以使用历史 API

但你应该添加withRouter()

class App extends React.Component{
  render(){
    return(
      <>
        <button onClick={()=>{this.props.history.push('/')}}>Redirect</button>
      </>
    )
  }
}

export default withRouter(App);