玩转React服务端渲染（二）：集成路由和Redux，轻松构建完整应用

2024-01-01 16:23:40

React 服务端渲染：集成 React-router-dom 和 Redux

集成 React-router-dom 和 Redux

在 React 应用程序中，React-router-dom 用来处理路由，而 Redux 用来管理状态。首先，在项目中安装这两个库：

npm install react-router-dom
npm install redux

安装完成后，就可以在代码中使用了。

服务端和客户端入口分别配置路由

服务端和客户端的路由配置不同，因为服务端需要在服务器上生成静态 HTML，而客户端需要在浏览器中运行。

服务端路由配置：

const express = require('express');
const app = express();

app.get('*', (req, res) => {
  const html = renderToString(<App />);
  res.send(html);
});

app.listen(3000);

客户端路由配置：

import { BrowserRouter as Router, Route } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

创建 Redux Store

Redux store 用来存储应用程序的状态。可以使用 createStore() 方法创建 store：

import { createStore } from 'redux';

const store = createStore(reducer);

服务端和客户端渲染 Redux Store

在服务端，需要在渲染组件之前，将 store 数据注入到组件中。

const html = renderToString(<App store={store} />);

在客户端，需要在组件挂载之前，将 store 数据注入到组件中。

const store = createStore(reducer);

ReactDOM.render(<App store={store} />, document.getElementById('root'));

总结

通过这些步骤，我们构建了一个完整的 React 服务端渲染应用程序。我们使用了 React-router-dom 来管理路由，使用 Redux 来管理状态。我们还分别在服务端和客户端配置了路由和渲染了 Redux store。通过这些步骤，我们就可以在服务端生成静态 HTML，并在客户端动态渲染组件了。

常见问题解答

1. 服务端渲染的优点有哪些？