Question

我创建了一个带有SSR（服务器端渲染）的ReactJS。它适用于单个页面，但是我有多个动态页面。例如：有一个项目列表，在每个项目上单击相应的页面将打开。但是我无法实现这一目标。

下面是我的目录结构：

index.js

const express = require("express"),
  app = express(),
  template = require("./views/template");
path = require("path");

// Serving static files
app.use("/assets", express.static(path.resolve(__dirname, "assets")));
app.use("/media", express.static(path.resolve(__dirname, "media")));

// hide powered by express
app.disable("x-powered-by");
// start the server
app.listen(process.env.PORT || 3000);

// our apps data model
// const data = require("./assets/data.json");

let initialState = {
  isFetching: true
  //   apps: data
};

//SSR function import
const ssr = require("./views/server");

// server rendered home page
app.get("/", (req, res) => {
  const { preloadedState, content } = ssr(initialState);
  const response = template("Server Rendered Page", preloadedState, content);
  res.setHeader("Cache-Control", "assets, max-age=604800");
  res.send(response);
});

// Pure client side rendered page
app.get("/client", (req, res) => {
  let response = template("Client Side Rendered page");
  res.setHeader("Cache-Control", "assets, max-age=604800");
  res.send(response);
});

// tiny trick to stop server during local development

app.get("/exit", (req, res) => {
  if (process.env.PORT) {
    res.send("Sorry, the server denies your request");
  } else {
    res.send("shutting down");
    process.exit(0);
  }
});

app.get("/:item", function(request, response) {
  console.log("item page visited!");

  const filePath = path.resolve(__dirname, "./assets", "index.html");
  fs.readFile(filePath, "utf8", function(err, data) {
    if (err) {
      return console.log(err);
    }
    data = data.replace(/\$OG_TITLE/g, "Item Page");
    result = data.replace(/\$OG_DESCRIPTION/g, "Item page description");
    // result = data.replace(/\$OG_IMAGE/g, "https://i.imgur.com/V7irMl8.png");

    response.send(result);
  });
});

app.js

import React, { Component } from "react";
import { Router, Route, Switch } from "react-router-dom";
import Header from "./Header_footer/Header";
import Footer from "./Header_footer/Footer";
import Home from "./Home";
import StockAnalysis from "./ItemDetails";

import createMemoryHistory from "history/createMemoryHistory";

const history = createMemoryHistory();

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <React.Fragment>
          <Header />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/:item" component={ItemDetails} />
          </Switch>
          <Footer />
        </React.Fragment>
      </Router>
    );
  }
}

export default App;

ItemDetails.jsx

import React, { Component } from "react";
import Sidebar from "../Home/Sidebar";

class ItemDetails extends Component {
  componentDidMount() {
    console.log("analysis page " + this.props.match.params.item);
  }

  render() {
    return (
      <div className="container container_padding">
        <div className="row">
          <Sidebar />
          <div className="col-md-9 col-sm-9 col-xs-12">Details page</div>
        </div>
      </div>
    );
  }
}

export default ItemDetails;

当我单击某个项目的浏览器时，我可以看到“详细信息”页面的内容，但是在url中，它仍然是localhost:3000，而应该是localhost:3000/item1

感谢您的帮助。

谢谢。

我怎样才能使我的ReactJS SSR应用程序在多个页面上工作

0 个答案: