connected-react-router 应用程序更新 url 但不是组件
connected-react-router app updates url but not components
我仔细检查了所有教程和常见问题解答,但我似乎无法弄清楚问题出在哪里。
完整示例在这里:https://stackblitz.com/edit/react-hmuwhx?embed=1&file=App.js
下面是一些感兴趣的代码。感谢帮助!
export const createRootReducer = history =>
combineReducers({
router: connectRouter(history),
ui: uiReducer,
user: userReducer
});
const middlewares = [ReduxThunk];
export const history = createBrowserHistory();
export const store = createStore(
createRootReducer(history),
compose(applyMiddleware(...middlewares, routerMiddleware(history)))
);
<Provider store={store}>
<App history={history} />
</Provider>
export class App extends React.Component {
render() {
return (
<ConnectedRouter history={this.props.history}>
<div className="full-height">
<InitializingContainer>
History length: {this.props.history.length}
<Switch>
<Route exact={true} path="/" component={HomePage} />
<Route path="/test" render={() => <div>Test</div>}/>
</Switch>
</InitializingContainer>
</div>
</ConnectedRouter>
);
}
}
export class HomePage extends React.Component {
render() {
return (
<ul>
<li>You are here: {this.props.match.path}</li>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/test">Test</Link>
</li>
</ul>
);
}
}
问题是您的 InitializingContainer 没有收到 Router 道具,因此没有监听路由历史上下文更改。
利用 withRouter
和 connect
喜欢
export const InitializingContainer = connect(
mapStateToProps,
mapDispatchToProps
)(withRouter(Initializing));
解决问题。
我仔细检查了所有教程和常见问题解答,但我似乎无法弄清楚问题出在哪里。
完整示例在这里:https://stackblitz.com/edit/react-hmuwhx?embed=1&file=App.js
下面是一些感兴趣的代码。感谢帮助!
export const createRootReducer = history =>
combineReducers({
router: connectRouter(history),
ui: uiReducer,
user: userReducer
});
const middlewares = [ReduxThunk];
export const history = createBrowserHistory();
export const store = createStore(
createRootReducer(history),
compose(applyMiddleware(...middlewares, routerMiddleware(history)))
);
<Provider store={store}>
<App history={history} />
</Provider>
export class App extends React.Component {
render() {
return (
<ConnectedRouter history={this.props.history}>
<div className="full-height">
<InitializingContainer>
History length: {this.props.history.length}
<Switch>
<Route exact={true} path="/" component={HomePage} />
<Route path="/test" render={() => <div>Test</div>}/>
</Switch>
</InitializingContainer>
</div>
</ConnectedRouter>
);
}
}
export class HomePage extends React.Component {
render() {
return (
<ul>
<li>You are here: {this.props.match.path}</li>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/test">Test</Link>
</li>
</ul>
);
}
}
问题是您的 InitializingContainer 没有收到 Router 道具,因此没有监听路由历史上下文更改。
利用 withRouter
和 connect
喜欢
export const InitializingContainer = connect(
mapStateToProps,
mapDispatchToProps
)(withRouter(Initializing));
解决问题。