Question

我偶然发现了无法访问同步历史记录对象的问题。我认为使用withRouter是一个好习惯。但是，当使用withRouter提供的历史对象并按下它时，推送状态不会反映在withRouter提供的位置对象中。奇怪的是，它会反映在最初提供给我的路由器的历史对象中。

我想出了一些奇怪的解决方案（我想）。我只是将历史对象导入到我想要使用它的组件模块中，并将其用作局部变量。将历史记录导入我的模块并因此绕过反应树，redux存储并完全响应路由器确实感到hacky。但是，它正在工作，到目前为止没有造成任何错误。有没有我不知道的问题？

见下面的代码。

我将历史对象实例化为：
store.js模块：

import createHistory from 'history/createBrowserHistory';
...
const history = createHistory();
...
export { history , store }

您可以看到导出历史记录。然后我将所述历史记录提供给我的路由器（在我的情况下为ConnectedRouter，因为我使用的是react-router-redux）： routes.js module

import { store , history } from '/imports/client/store';

const MyStoreRouter = () => {
    return (
        <Provider store={store}>
            <ConnectedRouter history={ history }>
                <div>
                    <Switch>
                        <Route exact path="/" component={Landing}/>
                        <Route path="/" component={MainApp}/>
                    </Switch>
                </div>
            </ConnectedRouter>
        </Provider>
    );
};

现在是古怪的部分。我将历史记录导入显示组件：
DisplayComponent.js模块：

import { history } from '/imports/client/store';
....
export default class EventCreationModal extends Component {
    constructor() {
        super();
        this.handleSelect = this.handleSelect.bind(this);
        this.state = {
            selectedCategory: (history.location.state && history.location.state.category) ? history.location.state.category : 'sports',
        };
        history.listen((location,action) => {
            this.setState({
                selectedCategory: (history.location.state && history.location.state.category) ? history.location.state.category : 'sports',
            })
        }); 
    }

    handleSelect(key) {
        history.push("/Home",{'category':key})
    }

render () {
    return (
        <Tabs activeKey={this.state.selectedCategory} onSelect={this.handleSelect} id="SportOrSocialSelector">
            <Tab eventKey={'sports} .../>
            <Tab eventKey={'social} .../>
        </Tabs>
    )
}

将{history}对象直接导入模块并在那里使用它有什么顾虑？

0 个答案: