使用ConnectedRouter在<Router>外部包装标记<Link>的方法如下:
import { ConnectedRouter } from 'connected-react-router';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer, { /* initial state */ }, applyMiddleware(/* middleware */));
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
import { Link } from 'react-router-dom';
const MyComponent = () => (
<div>
<Link to="/path">Go to Path</Link>
</div>
);
这样,你就可以使用ConnectedRouter在<Router>外部包装标记<Link>了。ConnectedRouter是react-router-redux库提供的一个高阶组件,它将React Router和Redux连接起来,使得你可以在Redux中管理应用程序的导航状态。
领取专属 10元无门槛券
手把手带您无忧上云