Redux调度和更改URL

Question

我有一个以下应用程序：

index.js

const store = createStore(rootReducers, applyMiddleware(createLogger()));

store.dispatch(fetchArticles());

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route exact path='/' component={ArticlesPage}/>
                <Route path='/search' component={SearchPage}/>
            </Switch>
        </Router>
    </Provider>,
    document.getElementById('root')
);

ArticlesPage.js

const ArticlesPage = ({groups, onSearch}) => (
    <Grid>
        <SearchBoxWithImages onSearch={onSearch}/>
        <CategorySections groups={groups}/>
    </Grid>
);

const mapStateToProps = state => ({
    groups: state.articles.groups
});

const mapDispatchToProps = dispatch => ({
    onSearch: (q) => dispatch(searchArticles(q))
});

export default withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(ArticlesPage));

fetchArticles和searchArticles是redux行动。

我想处理这个案子：

• 进入网站（网址/）
• 搜索后，由SearchBoxWithImages组件处理，我想将一个网址更改为/search?q=term（术语是来自onSearch处理程序的回调）
• 调用动作searchArticles来设置redux状态

目前只有州改变了（因为调用了searchArticles行动）。网址没有变化，因此SearchPage容器没有调用。

Answer 1

像这样创建一个历史对象

import createBrowserHistory from 'history/createBrowserHistory';

export default createBrowserHistory({});

将它应用到您的路由器

import React from 'react';
import {Router, Route, Switch} from 'react-router-dom';
import history from '../services/history';

export default class App extends React.Component {

    render() {
        return (
            <div>
                <Router history={history}>
                    {mainSwitch}
                </Router>
            </div>
        );
    }
}

无论您希望以编程方式更改路由，请执行以下操作

import history from '/path/to/history'

history.push('/path/you/want/to/go/to')

这也可以在你的redux动作中调用，所以你可以在动作结束后调用history.push。