React Redux 打开另一个页面

React 是一个流行的 JavaScript 库，而 Redux 则是一个管理应用程序状态的库。在许多应用中，需要在单个页面内导航到其他页面。这个过程可以是使用 React Redux 库来处理。

在 React 中使用 React Router

在 React 中，最流行的路由器是 React Router。React Router 允许您在应用程序中定义路径，并将每个路径映射到相应的组件。

要开始使用 React Router，请先安装它：

npm install react-router-dom

然后，您可以将其导入到项目中，并开始定义路径和组件：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在这个例子中，您定义了三个路径： /, /about 和 /contact。然后，您将这些路径映射到相应的组件。

在 Redux 中使用 React Router

在使用 Redux 管理状态时，要在应用程序中使用 React Router，您需要安装 React Redux 和 connected-react-router。

npm install react-redux connected-react-router

首先，您需要创建一个 Redux store，并使用 connected-react-router 中的 connectRouter 函数将 React Router 集成到其中：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { createBrowserHistory } from 'history';
import { connectRouter, routerMiddleware } from 'connected-react-router';
import rootReducer from './reducers';

export const history = createBrowserHistory();

const middleware = [routerMiddleware(history)];

const composedEnhancers = composeWithDevTools(
  applyMiddleware(...middleware),
);

const store = createStore(
  connectRouter(history)(rootReducer),
  composedEnhancers,
);

在这个例子中，您实例化了一个createBrowserHistory对象并导出它，以便在其他组件中使用它。然后，您使用connectRouter将它集成到 Redux 存储中。

接下来，您可以创建一个 Root 组件并将其渲染到应用程序中。此组件将利用 Router 和 Provider（来自 react-redux）来将 Redux Store 和 React Router 集成在一起。

import React from 'react';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import App from './App';
import { store, history } from './store';

const Root = () => {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </Provider>
  );
};

export default Root;

最后，在您的组件中，您可以使用 connected-react-router 提供的 push 函数将用户从一个路径推向另一个路径：

import React from 'react';
import { useDispatch } from 'react-redux';
import { push } from 'connected-react-router';

function MyComponent() {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(push('/new-page'));
  };

  return (
    <div>
      <button onClick={handleClick}>Go to new page</button>
    </div>
  );
}

export default MyComponent;

在这个例子中，当用户点击按钮时，handleClick函数将使用 push 将用户从当前路径推向新路径 /new-page。