Маршрутизация реакции на событие клика не работает

Я делаю маршрутизацию по событию нажатия кнопки

  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.handleChangeEvent} 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' />;

    }

Так что, но я тоже не получаю никаких ошибок консоли.

это потому, что Redirect — это элемент пользовательского интерфейса, вы должны отобразить его, а onClick — это обработчик событий, он ничего не отобразит, он просто выполнит тело функции обработчика. Чтобы решить вашу проблему, используйте this.props.history.push('/chat')

— 28.05.2019 07:12

reactjs typescript react-router

28.05.2019 07:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 603

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);

Я выбрал метод API истории, он работает

— 28.05.2019 07:18

@SridharPaiya Я согласен, history API более рекомендуется

— 28.05.2019 07:20

28.05.2019 07:11