История реакций.push () обновляет url, но не переходит к нему в браузере

Я прочитал много вещей о react-router v4 и библиотеке истории npm до этого момента, но никто, похоже, не помогает мне.

мой код работает так, как ожидалось, до момента, когда он должен перемещаться и выполнять простое перенаправление при изменении url-адреса с помощью истории.метода push (). URL-адрес изменяется на указанный маршрут, но не выполняет перенаправление при нажатии кнопки. Заранее спасибо, все еще учимся реагировать-маршрутизатор...

Я хотел бы для нажмите кнопку, чтобы сделать простой перенаправление без {forceRefresh:true}, который затем перезагружает всю страницу. 

import React from 'react';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory({forceRefresh:true});

export default class Link extends React.Component {
  onLogout() {
    history.push("/signup");
  }
  render() {
      return(
        <div>
          <h1>Your Links</h1>
          <button onClick={this.onLogout.bind(this)}>Log Out</button>
        </div>
      )
  }
}
15
history.js react-router-v4

4 ответов

проверьте, нет ли у вас вложенных тегов BrowserRouter.

У меня была эта проблема на react-router v4, но я решил ее после изменения приложения, чтобы иметь только BrowserRouter на самом верхнем уровне, как пример ниже.

ReactDOM.render(
  <BrowserRouter >
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
4

вам не нужно переходить на v3, React-Router 4.0.0 полностью способен выполнить то, что просит OP. 

const history = createBrowserHistory();

является пользовательским объектом истории, поэтому вы должны использовать <Router> синхронизировать его с react-router вместо <BrowserRouter>, что я и предполагал, что вы использовали.

попробуйте это вместо этого: 

import React, {Component} from 'react';
import { Router } from 'react-router';
import { Route } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();   

class App extends Component {
   constructor(props){
      super(props);
   }

   render(){
       return (
           <Router history={history}>   //pass in your custom history object
                <Route exact path="/" component={Home} />
                <Route path="/other" component={Other} />
           <Router />
       )
   }
}

после того, как ваш пользовательский объект истории передается через историю prop маршрутизатора, история.толчок должен работать в любом месте ваше приложение. (возможно, вы захотите поместить объект истории в файл конфигурации истории и импортировать его в места, где вы хотите маршрутизировать программно).

подробнее: React объект истории маршрутизатора

14

рендеринг это обновит при изменении маршрута

 `ReactDOM.render(
    <AppContainer>
      <BrowserRouter children={routes} basename={baseUrl} forceRefresh={true}/>
    </AppContainer>,
    document.getElementById("react-app")
  );`

react-router-dom: 4.2.2

4

у меня такая же проблема.

после некоторого поиска я нашел это react-проблема маршрутизатора

в настоящее время я понизил react-router до v3, и я использую browserHistory с react-router пакет, и он работает нормально.

0