文章/答案/技术大牛

发布

社区首页 >问答首页 >SSR应用程序，但客户端上的React路由器导航无法获取数据并中断页面

问SSR应用程序，但客户端上的React路由器导航无法获取数据并中断页面
EN

Stack Overflow用户

提问于 2020-11-11 06:02:01

回答 1查看 189关注 0票数 0

我已经创建了一个SSR React应用程序，它将数据加载到服务器上，并将其作为html发送到客户端。在为初始服务器请求提供服务并尝试切换到不同的导航链接之后，问题开始出现。url更改为正确的路径，但页面本身使用TypeError: Cannot read属性'length‘或'map’的未定义。我相信抓取在客户端是不起作用的，因为如果我从浏览器上关闭JavaScript，一切都会正常工作。

应用程序有四个路由，Home，Movies (需要获取数据)，TvShows (需要获取数据)和PageNotFound。同样，当我打开主页并试图切换到电影时，问题又出现了。但是，如果我首先打开Movies或TvShows，所有内容都会正确加载，因为服务器会为初始请求提供服务。下面是我的文件结构：

下面是我的一些文件的内容：

index.js (Server.js)

import "@babel/polyfill";
import express from "express";
import { applyMiddleware, createStore } from "redux";
import Routes from "./client/Routes";
import { matchRoutes } from "react-router-config";
import renderer from "./helpers/renderer.js";
import thunk from "redux-thunk";
import reducers from "./reducers";
const compression = require("compression");

const app = express();

app.use(compression());

app.use(express.static("public")); //treats the public(client side) directory as public, available to the outside world

// This is fired every time the server side receives a request

app.get("*", (req, res) => {
  // Create a new Redux store instance
  const store = createStore(reducers, {}, applyMiddleware(thunk));

  const promises = matchRoutes(Routes, req.path)
    .map(({ route }) => {
      return route.loadData ? route.loadData(store) : null;
    })
    .map((promise) => {
      if (promise) {
        return new Promise((resolve, reject) => {
          promise.then(resolve).catch(resolve);
        });
      }
    });

  Promise.all(promises).then(() => {
    // Send the rendered page back to the client
    // Grab the initial state from our Redux store
    const context = {};
    //const finalState = store.getState();
    const content = renderer(req, store, context);

    if (context.notFound) {
      res.status(404);
    }

    res.send(content);
  });
});

const PORT = process.env.PORT || 3000;

app.listen(PORT);

client.js

import "@babel/polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
import { renderRoutes } from "react-router-config";
import Routes from "./Routes";
import reducers from "../reducers";

// Grab the state from a global variable injected into the server-generated HTML
const preloadedState = window.__PRELOADED_STATE__;


// Create Redux store with initial state
const store = createStore(reducers, preloadedState, applyMiddleware(thunk));

ReactDOM.hydrate(
  <Provider store={store}>
    <BrowserRouter>
      <div>{renderRoutes(Routes)}</div>
    </BrowserRouter>
  </Provider>,
  document.querySelector("#root")
);

renderer.js

import React from "react";
import serialize from "serialize-javascript";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import { Provider } from "react-redux";
import Routes from "../client/Routes";
import { renderRoutes } from "react-router-config";
import { Helmet } from "react-helmet";

// Render the component to a string
export default (req, store, context) => {
  const html = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.path} context={context}>
        <div>{renderRoutes(Routes)}</div>
      </StaticRouter>
    </Provider>
  );

  const helmet = Helmet.renderStatic();

  return `
      <!doctype html>
      <html>
        <head>
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        </head>
        <body>
          <div id="root">${html}</div>
          <script>
            // WARNING: See the following for security issues around embedding JSON in HTML:
            // https://redux.js.org/recipes/server-rendering/#security-considerations
            window.__PRELOADED_STATE__ = ${serialize(store.getState())}
          </script>
          <script src="/bundle.js"></script>
        </body>
      </html>
      `;
};

Routes.js

 import App from "./App";
    import HomePage from "./pages/HomePage";
    import MovieListPage from "./pages/MovieListPage";
    import TvShowsPage from "./pages/TvShowsPage";
    import NotFoundPage from "./pages/NotFoundPage";
    
    //using spread operator for the components
    //and loadData function(if available)
    //because they are imported in object form now
    export default [
      {
        ...App, //no path added to App, meaning it will always be displayed on screen
        routes: [
          {
            ...HomePage,
            path: "/",
            exact: true,
          },
          {
            ...MovieListPage,
            path: "/movies",
            exact: true,
          },
          {
            ...TvShowsPage,
            path: "/tvshows",
            exact: true,
          },
          {
            ...NotFoundPage, //will be shown if react router can't match any of the defined routes
          },
        ],
      },
    ];

MovieListPage.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchMovies } from "../../actions";
import { Helmet } from "react-helmet";

class MovieListPage extends Component {
  // Have state ready for both Movies and TvShows link clicks/direct requests
  componentDidMount() {
    if (this.props.movies) return;
    this.props.fetchMovies();
  }

  renderData() {
    return this.props.movies.results.map((movie) => {
      return (
        <div
          key={movie.id}
          className="card text-center m-3"
          style={{ width: "15rem" }}
        >
          <img
            className="card-img-top"
            alt="..."
            src={this.dynamicUrl(movie)}
          />
          <div className="card-body">
            <h5 className="card-title">{movie.title}</h5>
            <p className="card-text font-weight-light">{movie.release_date}</p>
            <a href={this.dynamicLink(movie)} className="btn btn-secondary">
              TMDB
            </a>
          </div>
        </div>
      );
    });
  }

  dynamicUrl(movie) {
    let url = "https://image.tmdb.org/t/p/w200/" + movie.poster_path;
    return url;
  }

  dynamicLink(movie) {
    let link = "https://www.themoviedb.org/movie/" + movie.id;
    return link;
  }

  head() {
    return (
      <Helmet>
        <title>{`${this.props.movies.results.length} Movies Loaded`}</title>
        <meta property="og:title" content="Movies" />
      </Helmet>
    );
  }

  render() {
    return (
      <div className="container">
        {this.head()}
        <div className="row">{this.renderData()}</div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { movies: state.movies };
}

function loadData(store) {
  return store.dispatch(fetchMovies());
}

//exporting the component and the loadData function (if present)
//in the form of an object(key:value pair)
// to avoid overlap of different loadData function imports in Routes

export default {
  loadData,
  component: connect(mapStateToProps, { fetchMovies })(MovieListPage),
};

我好像不知道我错过了什么。

reactjs

react-redux

react-router

server-side-rendering

javascript

回答 1

Stack Overflow用户

发布于 2020-11-11 18:13:35

我在renderer.js中发现了这个问题。我没有在服务器提供的html中为我的客户端bundle.js提供正确的路径。它必须是<script src="/public/bundle.js"></script>.，而不是<script src="/bundle.js"></script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64777419

复制

相似问题

问SSR应用程序，但客户端上的React路由器导航无法获取数据并中断页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SSR应用程序，但客户端上的React路由器导航无法获取数据并中断页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SSR应用程序，但客户端上的React路由器导航无法获取数据并中断页面
EN