首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用ConnectedRouter在<Router>外部包装标记<Link>?

使用ConnectedRouter在<Router>外部包装标记<Link>的方法如下:

  1. 首先,确保你已经安装了react-router-dom和react-redux这两个库。
  2. 在你的应用程序的入口文件中,导入ConnectedRouter和Provider组件:
代码语言:txt
复制
import { ConnectedRouter } from 'connected-react-router';
import { Provider } from 'react-redux';
  1. 创建一个history对象,用于管理应用程序的导航历史记录。你可以使用createBrowserHistory或createMemoryHistory来创建history对象。这里以createBrowserHistory为例:
代码语言:txt
复制
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
  1. 创建一个Redux store,并将history对象作为参数传递给createStore函数:
代码语言:txt
复制
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer, { /* initial state */ }, applyMiddleware(/* middleware */));
  1. 在应用程序的根组件外部包装ConnectedRouter和Provider组件,并将history对象和store传递给它们:
代码语言:txt
复制
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);
  1. 现在,你可以在应用程序的任何地方使用<Link>组件来创建导航链接,它们将自动与ConnectedRouter和history对象进行关联:
代码语言:txt
复制
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中管理应用程序的导航状态。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券