React-router 2.0: программно изменить маршрут (URL не обновляется)

Question

У меня возникли проблемы с программной маршрутизацией с реакции-маршрутизатором 2.0

Документы говорят, чтобы использовать

this.context.router.push('/test');

Это происходит правильно, но URL-адрес в моем браузере остается прежним и не обновляется, даже если компоненты с другой страницы (/test) были обработаны и изменение маршрута прошло успешно.

Как я могу получить URL для обновления?

Answer 1

this.props.history.push('/some/path'); осуждается

Теперь мы должны использовать следующее:

import { browserHistory } from 'react-router'

Затем, куда бы вы ни захотели перейти - где-то в вашем коде - выполните:

browserHistory.push('/some/path');

Вот как я настроил свой routes.jsx файл, который обрабатывает мой механизм маршрутизации:

//Require react.
import React from "react";
//Require routing variables.
import { Router, Route, IndexRoute, browserHistory } from "react-router";
//Example components.
import MainComponent from "../containers/main.js";
import HomeComponent from "../containers/home.js";

var Routes = (
    <Router history={browserHistory}>
        <Route path="/" component={MainComponent}>
            <IndexRoute component={HomeComponent} />
            <Route path="/example" component={ExampleComponent} />
        </Route>
    </Router>
);

module.exports = Routes;

Я использую веб-пакет. В веб-пакете у меня также есть это:

... bla ... bla... bla ...
module: {

},
devServer: {
    historyApiFallback: true
},
plugins: [

]
... bla ... bla... bla ...

---

ОБНОВЛЕНИЕ 04-Jan-2018:

[Отказ от ответственности: я сейчас использую TypeScript вместо ES6]

Вот как я делаю вещи прямо сейчас с react^15.6.1 & react-dom^15.6.1

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import Routes from "./configuration/routes";
ReactDOM.render(
  Routes,
  document.getElementById("app")
);

routes.tsx

import * as React from "react";
import { BrowserRouter, HashRouter  } from 'react-router-dom';
import App from "../containers/App";

let Routes: any = (
    // <BrowserRouter>
    //     <App someDefaultValue/>
    // </BrowserRouter>

    // HashRouter adds the # in front of our paths :) - check the browser's URL to see.
    <HashRouter>
        <App someDefaultValue/>
    </HashRouter>
);
export default Routes;

App.tsx

import * as React from "react";
import { Switch, Route } from 'react-router-dom'

import Header from "../components/header-component/header";
import Main from "../components/main-component/main";
import Footer from "../components/footer-component/footer";

interface IComponentProps { someDefaultValue: boolean; }
interface IComponentState { loading: boolean; }

class App extends React.Component<IComponentProps, IComponentState> {
    constructor() {
        super();

        this.state = {
            loading: true
        };
    }

    render() {
        const { loading } = this.state;
        if(loading) {
            //Render something or something else..
        }

        return (
            <div className="app-container">
                <Switch>
                    <Route path='/' component={Header}/>
                </Switch>
                <Switch>
                    <Route path='/' component={Main}/>
                </Switch>
                <Switch>
                    <Route path='/' component={Footer}/>
                </Switch>
            </div>
        );
    }
}
export default App;

Затем вы можете использовать что-то вроде этого для размещения навигации по пунктам меню при нажатии (или что-то...)menu.tsx

import * as React from "react";
import { Link } from 'react-router-dom'

class Menu extends React.Component {
    render() {
        return (
            <div>
                <Link to='/home'>
                    <div>Home</div>
                </Link>
                <Link to='/about'>
                    <div>About</div>
                </Link>
            </div>);
    }
}
export default Menu;

Для навигации "программно":

this.props.history.push('/wherever');

Причина я использую HashRouterпотому что я заметил с BrowserRouter что он ломается, когда люди сохраняют "закладки" и т. д. HashRouter позволяет моим пользователям легко перемещаться по моему сайту:)

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

О, да, почти забыл - я на самом деле не проверял это, но я предполагаю, что нам все еще нужно

devServer: { historyApiFallback: true } 

в нашем webpack.config.js? Не знал бы:)... но он сейчас в моем...

Answer 2

Этот ответ может быть то, что вы ищете, он говорит, чтобы использовать

this.props.history.push('/some/path');

когда внутри компонента