connected-react-router - 你不应该在 Router 之外使用 Route

1个回答

王豆豆02

2025-06-16 10:45

使用connected-react-router时，我们需要注意的一个重要点是不应该在之外使用组件。这是因为connected-react-router是与react-router-dom库配合使用的，它提供了一个将路由状态与Redux存储状态同步的机制。因此，如果我们在之外使用组件，就无法实现路由状态的同步，从而导致路由跳转等功能无法正常工作。

为了更好地理解这个问题，我们可以通过一个简单的案例来说明。假设我们有一个基于React的应用程序，其中包含了两个页面：首页和用户信息页。我们使用connected-react-router来管理路由状态，并使用组件来定义这两个页面的路由。

首先，我们需要安装所需的依赖库。在终端中运行以下命令：

npm install react-router-dom connected-react-router

接下来，我们创建一个名为App的组件，并在其中定义路由。

JSx
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { connectRouter, ConnectedRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
function Home() {
  return <h1>首页</h1>;
}
function UserInfo() {
  return <h1>用户信息页</h1>;
}
function App() {
  return (
    <ConnectedRouter history={history}>
      <Route exact path="/" component={Home} />
      <Route exact path="/user" component={UserInfo} />
    </ConnectedRouter>
  );
}
export default App;

在上面的代码中，我们使用了BrowserRouter作为Router组件，并使用ConnectedRouter组件来实现路由状态与Redux存储状态的同步。我们还创建了两个页面组件：Home和UserInfo，并使用组件将它们与相应的路由路径关联起来。

现在，我们可以在主入口文件中使用App组件。

JSx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';
import App from './App';
const history = createBrowserHistory();
const rootReducer = combineReducers({
  router: connectRouter(history),
});
const store = createStore(rootReducer);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

在上面的代码中，我们使用createStore函数创建一个Redux存储，并将connectRouter函数用于创建路由状态的reducer。然后，将rootReducer传递给createStore函数，并将store作为属性传递给Provider组件，以便在整个应用程序中使用Redux存储。

到目前为止，我们已经完成了基本的配置和路由设置。现在，我们可以启动应用程序，并在浏览器中访问首页和用户信息页。

shell

npm start

在浏览器中打开http://localhost:3000，你将看到一个显示“首页”的标题。点击链接“用户信息”，页面将跳转到用户信息页，显示“用户信息页”的标题。

不要在之外使用

在上面的示例中，我们使用了connected-react-router来实现路由状态与Redux存储状态的同步。这是因为connected-react-router是与react-router-dom库配合使用的，它提供了一种机制来确保路由状态的同步。因此，我们应该遵循这个原则，不要在之外使用组件。

这是非常重要的，因为如果我们在之外使用组件，就无法实现路由状态的同步。这意味着，当我们在一个页面上使用组件定义路由时，该路由将无法在其他页面上正常工作。这将导致路由跳转等功能无法正常使用，给用户带来困惑和不便。

因此，为了避免出现这个问题，我们应该始终在组件内部使用组件，并确保路由状态与Redux存储状态的同步。

在本文中，我们讨论了使用connected-react-router时不应该在之外使用组件的重要性。我们通过一个简单的案例代码演示了如何使用connected-react-router和react-router-dom库来实现路由状态的同步，并强调了遵循这个原则的重要性。希望本文对你理解和正确使用connected-react-router有所帮助。

举报有用（4）分享收藏

connected-react-router - 你不应该在 Router 之外使用 Route

1个回答

王豆豆02

热门话题

相关问题