ConnectedRouter - 使用浏览器返回功能以编程方式推送路由

Question

我正在使用来自 react-router-redux (5.0.0-alpha.6) 的 ConnectedRouter。这是示例代码

import {Route, Switch} from 'react-router';
import {ConnectedRouter} from 'react-router-redux';

ReactDOM.render(
    <Provider store={app.store}>
        <ConnectedRouter history={app.history}>
            <div>
                <Switch>
                    <Route exact path="/about" component={About} />
                    <Route exact path="/:animalName?" component={Animalpage} />
                </Switch>
            </div>
        </ConnectedRouter>
    </Provider>, document.getElementById('root')
);

我有一个要求，如果我在“/”上着陆，那么它应该路由到默认动物（比如猫）。

我正在使用来自 react-router-redux 的推送来实现这个

dispatch(push("/Cat"));

现在的问题是，当我点击浏览器后退按钮时，它会将我带到“/”，这又将我带回到“/Cat”，因此我无法使用浏览器的后退按钮。

有没有办法实现我的要求，即转到默认路由并让浏览器后退按钮起作用？

Answer 1

您应该使用 replace() 操作而不是 push()。可以找到详细信息here

Action creators that correspond with the history methods of the same name.
For reference they are defined as follows:

push - Pushes a new location to history, becoming the current location.

replace - Replaces the current location in history.

go - Moves backwards or forwards a relative number of locations in history.

goForward - Moves forward one location. Equivalent to go(1)

goBack - Moves backwards one location. Equivalent to go(-1)

ConnectedRouter - 使用浏览器返回功能以编程方式推送路由

ConnectedRouter - push a route programatically with browser back functionality

reactjs

redux

react-router

react-router-v4

react-router-redux