Как я могу исправить нарушение инварианта при использовании реакции-dom-сервера с реагировать-маршрутизатор-дом?

Question

Когда я запустил приложение без использования renderToString () в React-dom/server, приложение работало без проблем. Затем, когда я использовал renderToString(), я получил инвариантное нарушение. Я провел некоторое исследование и обнаружил, что должен разместить на сервере и на клиенте. Но я все еще получаю эту ошибку.

введите описание изображения здесь

Структура файла: / root server.js / api index.js / src index.js bookLibrary.json / components app.js signIn.js DisplayBook.js

// сервер (структура файла: хранится в корневой папке)

import config from './config';
import apiRouter from './api';
import sassMiddleware from 'node-sass-middleware';
import path from 'path';

import express from 'express';

const server = express();

server.use(sassMiddleware({
  src: path.join(__dirname, 'sass'),
  dest: path.join(__dirname, 'public')
}));

/* Use EJS to server render our javascript front end components*/

server.set('view engine', 'ejs');
import serverRender from './serverRender';

server.get('/', (req, res) => {
  serverRender()
  .then(content => {
    res.render('index', {
      content
  });

  })
  .catch(console.error);
});


server.use('/api', apiRouter);
server.use(express.static('public'));

server.get('/signin',function(req,res){
  res.json("What the fuck my hommie");
});

server.listen(config.port, config.host,() => {
  console.info('Express listening on port', config.port);
});

//App.js (структура файла: в папке src, внутри корневой папки)

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch
} from 'react-router-dom';
import axios from 'axios';
/* Pages */
import SignIn from './SignIn';
/* Components */
//import data from '../bookLibrary';
import HeaderNav from './HeaderNav';
import DisplayBook from './DisplayBook';
import FooterSection from './FooterSection';

class App extends Component {
  state= {
    books: this.props.initialBooks
  };
  componentDidMount(){
    axios.get('/api/books')
    .then(resp => {
      this.setState({
        books: resp.data.books
      });
    })
    .catch(console.err);

  }
  render() {
    return (
      <Router>
        <div>
          <HeaderNav />
          <Switch>
            <Route path="/signin" component={SignIn}/>
            <Route exact path="/" render={(props) =>(
              /*The Main Part Of the Website should go inside of <main> 
                 </main> */
              <main>
                <div className="container">
                  <p>Images should go here</p>
                  <p>The List of Top 20 Books from BBN</p>
                  {this.state.books.map(book =>
                    <DisplayBook key={book.id} {...book}/>
                  )}
                </div>
              </main>
            )} />
          </Switch>
          <FooterSection />
        </div>
      </Router>
    );
  }
}
export default App;

// API, используемый для визуализации данных из файла.json (сейчас. позже он будет использоваться для извлечения данных из базы данных)

import express from 'express';
import data from '../src/bookLibrary';
import {MongoClient} from 'mongodb';
import assert from 'assert';
import config from '../config';

const router = express.Router();

router.get('/books', (req, res) => {
  res.send({books: data.books});
});

export default router;

//index.js... браузер или клиент (структура файла: внутри папки src)

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './components/App';

ReactDOM.render((
  <BrowserRouter>
    <App initialBooks={[]} className="Website"/>
  </BrowserRouter>
), document.getElementById('root'));

// serverRender используется для извлечения данных из API (файловая структура хранится в корневой папке) / извлечение данных из API

import React from 'react';
import {renderToString} from 'react-dom/server';
import {StaticRouter} from 'react-router-dom';
import App from './src/components/App';
import config from './config';
import axios from 'axios';

const context ={};
const serverRender = () =>
  axios.get(`${config.serverUrl}/api/books`)
    .then(resp => {
      return renderToString(
        <StaticRouter location={req.url} context={context}>
          <App intialBooks = {resp.data.books}/>
        </StaticRouter>
      );
});

export default serverRender;