React-router 2.0：以编程方式更改路由（URL 未更新）

Question

我在使用 react-router 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;

我正在使用 webpack。在webpack中，我也有这个：

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

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

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

---

2018 年 1 月 4 日更新：

[免责声明：我现在使用 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

这个answer 可能就是你要找的它说要使用的东西

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

在组件内部时