Блог

Я новичок в SSR, и у меня много вопросов. Я попытался найти некоторые ответы, но не могу найти ни одного относительно этого.

Каждый раз, когда пользователь нажимает на ссылку, он будет перенаправлен на новую страницу. React-это одностраничное приложение, поэтому приложение просто отображает новый компонент. Однако в моем приложении react сервер отлично отображает новый компонент, но URL-адрес не меняется.

Пример
Того, что я ожидал:
URL: http://localhost:8080/
Маршрут:
URL-адрес индекса: http://localhost:8080/about
Маршрут: Около

Что происходит:
URL: http://localhost:8080/
Маршрут:
URL-адрес индекса: http://localhost:8080/
Маршрут: Около

Я почти уверен, что проблема заключается в server.js, но я не могу точно определить, где именно.

server.js

 import express from "express";
import fs from "fs";
import path from "path";
import React from "react";
import ReactDOMServer from "react-dom/server";
import {Helmet} from "react-helmet";

import App from "../src/App";

const PORT = process.env.port || 8080;

const app = express();

const htmlcontents = ReactDOMServer.renderToString(<App />);

const helmet = Helmet.renderStatic();

app.use("^/$", (req, res, next) => {
  fs.readFile(path.resolve("./build/index.html"), "utf-8", (err, data) => {
    if (err) {
      console.log(err);
      return res.status(500).send("Some error happened");
    }
    return res.send(
      data.replace(
        '<div id="root"></div>',
        `<div id="root">${htmlcontents}</div>`
      )
      .replace("</head>", `${helmet.meta.toString()}</head>`)
      .replace("</head>", `${helmet.title.toString()}</head>`)
    );
  });
});

app.use(express.static(path.resolve(__dirname, '../build')))

app.listen(PORT, () => {
  console.log(`App launched on ${PORT}`);
});
 

app.js

 import React, { Component } from 'react';
import { Router, Switch, Route, Redirect} from 'react-router-dom';
import { Home } from './components/Home';
import { about } from './components/about';
import { ErrorFindingPage } from './components/ErrorFindingPage';
import { createMemoryHistory } from 'history';
import './custom.css';
const history = createMemoryHistory();
export default class App extends Component {
    static displayName = App.name;

    render() {
        return (
            <Router history={history}>
                <NavMenu />
                    <Switch>
                        <Route exact path='/' component={Home} />
                        <Route path='/about' component={about} />
                        <Route path='/ErrorFindingPage' component={ErrorFindingPage} />
                        <Redirect to="/ErrorFindingPage" />
                    </Switch>
            </Router>
        );
    }
}

 

Спасибо вам всем