Невозможно найти причину: Реакт: перенаправление onclick не работает, но работают другие перенаправления (работают ссылки и history.push) [duplicate]

React-Router 4.x Ответ:

В конце концов, мне нравится иметь один объект истории, в котором я могу переносить даже внешние компоненты. Мне нравится делать один файл history.js, который я импортирую по требованию, и просто манипулировать им.

Вам просто нужно изменить BrowserRouter на Router и указать поддержку истории. Это ничего не изменяет для вас, кроме того, что у вас есть свой собственный объект истории, который вы можете манипулировать по своему усмотрению.

Вам необходимо установить history , библиотеку, используемую react-router.

Пример использования, нотация ES6:

history.js

import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()

BasicComponent.js

import React, { Component } from 'react';
import history from './history';

class BasicComponent extends Component {

    goToIndex(e){
        e.preventDefault();
        history.push('/');
    }

    render(){
        return <a href="#" onClick={this.goToIndex}>Previous</a>;
    }
}

] EDIT 16 апреля 2018 года:

Если вам нужно перейти от компонента, который фактически отображается с помощью компонента Route, вы также можете получить доступ к истории из реквизита, например:

BasicComponent.js

import React, { Component } from 'react';

class BasicComponent extends Component {

    navigate(e){
        e.preventDefault();
        this.props.history.push('/url');
    }

    render(){
        return <a href="#" onClick={this.navigate}>Previous</a>;
    }
}

React-Router V4

, если вы используете версию 4, тогда вы можете использовать мою библиотеку (Shameless plug), где вы просто отправляете действие, и все просто работает!

dispatch(navigateTo("/aboutUs"));

https://www.npmjs.com/package/trippler

В React-Router v4 и ES6

Вы можете использовать withRouter и this.props.history.push.

import {withRouter} from 'react-router-dom';

class Home extends Component {

    componentDidMount() {
        this.props.history.push('/redirect-to');
    }
}

export default withRouter(Home);

Чтобы использовать withRouter с компонентом на основе класса, попробуйте что-то вроде этого ниже. Не забудьте изменить выражение экспорта для использования withRouter:

import { withRouter } from 'react-router-dom'

class YourClass extends React.Component {
  yourFunction = () => {
    doSomeAsyncAction(() =>
      this.props.history.push('/other_location')
    )
  }

  render() {
    return (
      <div>
        <Form onSubmit={ this.yourFunction } />
      </div>
    )
  }
}

export default withRouter(YourClass);

Пожалуйста, найдите ниже рабочий код: Это очень простой способ навигации с помощью реагирующего маршрутизатора:

class Register extends React.Component {
  state = {
    toDashboard: false,
  }
  handleSubmit = (user) => {
    saveUser(user)
      .then(() => this.setState(() => ({
        toDashboard: true
      })))
  }
  render() {
    if (this.state.toDashboard === true) {
      return <Redirect to='/dashboard' />
    }

    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

& lt; Redirect /> is

Композитный ✅ Декларативный ✅ пользовательское событие -> изменение состояния -> повторная рендеринга ✅

Регистрирующий компонент визуализируется React Router, наш код может выглядеть следующим образом:

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.push('/dashboard')
    ))
  }
  render() {
    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

, добавляя withRouter, это будет выглядеть так

import {
  withRouter
} from 'react-router-dom'

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.push('/dashboard')
    ))
  }
  render() {
    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

export default withRouter(Register)

Существует два способа программной навигации с помощью React Router - и history.push. Что вы используете, в основном зависит от вас и вашего конкретного варианта использования, хотя я стараюсь использовать Redirect.

Не может быть лучшим подходом, но ... Используя response-router v4, следующий машинописный документ может дать представление для некоторых.

В представленном компоненте ниже, например. Объект LoginPage, router доступен и просто вызывает router.transitionTo('/homepage') для навигации.

Код навигации был взят из https://react-router.now.sh/Match .

"react-router": "^4.0.0-2", "react": "^15.3.1",

import Router from 'react-router/BrowserRouter';
import { History } from 'react-history/BrowserHistory';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

interface MatchWithPropsInterface {
  component: typeof React.Component,
  router: Router,
  history: History,
  exactly?: any,
  pattern: string
}

class MatchWithProps extends React.Component<MatchWithPropsInterface,any> {
  render() {
    return(
      <Match {...this.props} render={(matchProps) => (
             React.createElement(this.props.component, this.props)

        )}
       />
    )
  }
}

ReactDOM.render(
    <Router>
      {({ router }) => (
        <div>
          <MatchWithProps exactly pattern="/" component={LoginPage} router={router} history={history} />
          <MatchWithProps pattern="/login" component={LoginPage} router={router} history={history} />
          <MatchWithProps pattern="/homepage" component={HomePage} router={router} history={history} />
          <Miss component={NotFoundView} />
        </div>
      )}
    </Router>,

   document.getElementById('app')
);

Просто используйте this.props.history.push('/where/to/go');

с React-Router v4 на горизонте, теперь есть новый способ сделать это.

import { MemoryRouter, BrowserRouter } from 'react-router';

const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;

<Router location="/page-to-go-to"/>

response-lego - пример приложения, показывающий , как использовать / обновлять реактивный маршрутизатор , и он включает пример функциональных тестов, которые перемещаются в приложении.

В ответном маршрутизаторе v4. Я следую этому двум способом маршрутизации программно.

1. this.props.history.push("/something/something")
2. this.props.history.replace("/something/something")

Номер два

Заменяет текущую запись в стеке истории

Чтобы получить историю в реквизитах, вам может понадобиться обернуть ваш компонент с помощью

withRouter https://reacttraining.com/react-router/core/api/withRouter

Если произойдет сопряжение RR4 с редукцией через response-router-redux , используйте действия с маршрутизацией, которые также могут быть созданы создателями из react-router-redux.

import { push, replace, ... } from 'react-router-redux'

class WrappedComponent extends React.Component {
  handleRedirect(url, replaceState = true) { 
    replaceState 
      ? this.props.dispatch(replace(url)) 
      : this.props.dispatch(push(url)) 
  }
  render() { ... }
}

export default connect(null)(WrappedComponent)

Если вы используете reducex thunk / saga для управления асинхронным потоком, импортируйте созданных выше создателей действий в действия redux и зацепите за взаимодействие с компонентами, используя mapDispatchToProps, возможно, лучше.

React-Router 4.0.0+ Answer

В 4.0 и выше используйте историю в качестве опоры вашего компонента.

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here
};

React-Router 3.0.0+ Answer

В версии 3.0 и выше используйте маршрутизатор в качестве опоры вашего компонента.

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

React-Router 2.4.0+ Ответ

В 2.4 и выше используйте компонент более высокого порядка, чтобы получить маршрутизатор в качестве опоры вашего компонента.

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
var DecoratedExample = withRouter(Example);

// PropTypes
Example.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  }).isRequired
};

React-Router 2.0.0+ Answer

Эта версия обратно совместима с 1.x, поэтому нет необходимости в руководстве по обновлению.

При этом, если вы хотите переключиться на новый шаблон, внутри маршрутизатора есть браузерный модуль, к которому вы можете получить доступ с помощью

import { browserHistory } from 'react-router'

Теперь у вас есть доступ к истории вашего браузера, поэтому вы можете делать такие вещи, как push, replace и т. д. Например:

browserHistory.push('/some/path')

Дальнейшее чтение: Истории и Навигация

---

React-Router 1.xx Ответ

Я не буду вдаваться в подробности. Вы можете прочитать об этом в Руководстве по обновлению

. Основное изменение в вопросе здесь - это переход от навигационного микширования к истории. Теперь он использует историю браузераAPI для изменения маршрута, поэтому мы будем использовать pushState() с этого момента.

Вот пример использования Mixin:

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }
})

Обратите внимание, что этот History приходит из rackt / history проект. Не из React-Router.

Если вы не хотите использовать Mixin по какой-либо причине (возможно, из-за класса ES6), вы можете получить доступ к истории, которую вы получаете от маршрутизатора, с this.props.history , Он будет доступен только для компонентов, предоставляемых вашим маршрутизатором. Итак, если вы хотите использовать его в любых дочерних компонентах, его нужно передать в качестве атрибута через props.

Подробнее о новой версии вы можете прочитать в своей документации по 1.0.x

Вот справочная страница, в частности, о навигации вне вашего компонента

Он рекомендует захватить ссылку history = createHistory() и вызвать replaceState на это.

React-Router 0.13.x Ответ

Я попал в ту же проблему и мог найти решение с помощью навигационного микшина, который приходит с реакцией [30]

import React from 'react';
import {Navigation} from 'react-router';

let Authentication = React.createClass({
  mixins: [Navigation],

  handleClick(e) {
    e.preventDefault();

    this.transitionTo('/');
  },

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

Мне удалось вызвать transitionTo() без необходимости доступа к .context

. Или вы может попробовать фантастический ES6 class

import React from 'react';

export default class Authentication extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.context.router.transitionTo('/');
  }

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
}

Authentication.contextTypes = {
  router: React.PropTypes.func.isRequired
};

React-Router-Redux

Примечание: если вы используете Redux, есть еще один проект под названием React-Router-Redux , который дает вам привязки редукции для ReactRouter, используя тот же подход, что React-Redux делает

React -Router-Redux имеет несколько доступных методов, которые позволяют просто перемещаться из создателей действий. Они могут быть особенно полезны для людей, имеющих существующую архитектуру в React Native, и они хотят использовать те же шаблоны в React Web с минимальными служебными надбавками.

Исследуйте следующие методы:

• push(location)
• replace(location)
• go(number)
• goBack()
• goForward()

Ниже приведен пример использования с помощью Redux-Thunk :

./ actioncreators.js

import { goBack } from 'react-router-redux'

export const onBackPress = () => (dispatch) => dispatch(goBack())

./ viewcomponent .js

<button
  disabled={submitting}
  className="cancel_button"
  onClick={(e) => {
    e.preventDefault()
    this.props.onBackPress()
  }}
>
  CANCEL
</button>

Если вы используете хэш или историю браузера, вы можете сделать

hashHistory.push('/login');
browserHistory.push('/login');