React Router Сервер рендеринга

Question

Я пытаюсь реализовать SSR для моего приложения реагирования, которое содержит реагирующий маршрутизатор и реагирующую пружину, но оно не отвечает, как ожидалось, я не могу go переходить с одной страницы на другую, а также не происходит никаких эффектов перехода , Я также пытался опубликовать sh его для netlify, но после этого он показывает ошибку

"Приложение создано с использованием create-реагировать-приложение"

вот мой код:

package.json
scripts

"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject",
		"dev": "nodemon server/index.js"
	},

server/index.js

require('ignore-styles');

require('@babel/register')({
    ignore: [/(node_modules)/],
    presets: ['@babel/preset-env', '@babel/preset-react']
});

require('./server')

Router.js

import React from 'react';
import { Switch, Route, useLocation } from "react-router-dom";
import { useTransition, animated } from 'react-spring';
import SignIn from './signIn';
import SignUp from './signUp';
import CreateTask from './createtTask';
import { makeStyles } from "@material-ui/core";
import Dashboard from './dashBoard';

const useStyle = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        height: "100%",
    }
}));

const Router = () => {
    const location = useLocation();
    const classes = useStyle();
    console.log(location)
    const transitions = useTransition(location, location => location.pathname, {
        from: { opacity: 0.9, transform: 'translate3d(50%,0,0)' },
        enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
        leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
        config: { duration: 800 },
    });
    return transitions.map(({ item: props, location, key }) => (
        <animated.div key={key} style={{ ...props }} className={classes.root}>
            <Switch>
                <Route exact path="/" render={(props) => <SignIn {...props} />} />
                <Route exact path="/signUp" render={(props) => <SignUp {...props} />} />
                <Route exact path="/createTask" render={(props) => <CreateTask {...props} />} />
                <Route exact path="/dashboard" render={(props) => <Dashboard {...props} />} />

            </Switch>
        </animated.div>
    ))
}

export default Router;

App.js

import React from 'react';
import { StaticRouter } from 'react-router-dom';
import Router from './components/router';
const App = () => {
    return (
        <React.Fragment>
            <StaticRouter>
                <Router />
            </StaticRouter>
        </React.Fragment>
    )
}

export default App;

Server.js

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from '../src/App';
import express from 'express';
import fs from 'fs';
import path from 'path';
import { Server } from 'http';
const app = express();

const PORT = process.env.PORT || 2000;
app.use('^/$', (req, res, next) => {
    fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => {
        if (err) {
            console.log(err);
            return res.status(500).send("Error occured");
        }
        return res.send(data.replace('<div id="root"></div>',
            `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`))
    })
})
app.use(express.static(path.resolve(__dirname, '..', 'build')));
app.listen(PORT, () => { console.log(`App is up on ${PORT}`) });