Я использую React-Router и Rending на стороне сервера. но моя серверная сторона не работает с маршрутизатором. он меняет URL, но не отображает компоненты
Код моего сервера:
import express from 'express';
import cors from "cors";
import { renderToString } from "react-dom/server";
import App from '../shared/App';
import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from "../shared/reducers/index";
import { StaticRouter, matchPath } from "react-router-dom"
import { create } from 'domain';
const app = express();
app.use(express.static("public"));
app.use(cors());
app.use("*", (req, res, next) => {
let context = {};
const store = createStore(rootReducer)
const markup = renderToString(
<Provider store = {store}>
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
</Provider>
)
const preloadedState = store.getState();
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>SSR with RR</title>
</head>
<body>
<div id="app">${markup}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
</script>
<script src = "/bundle.js"></script>
</body>
</html>
`)
});
app.listen(3000, () => {
console.log('Server is running ....')
});
А это мой код приложения:
import React from 'react';
import { Route } from 'react-router-dom';
import List from "./List";
import { Link } from 'react-router-dom';
import Home from './Home';
import { connect } from "react-redux";
class App extends React.Component {
render() {
return (
<div>
Hello
<ul>
<li><Link to="/list">List</Link></li>
<li><Link to="/home"> Home</Link></li>
</ul>
<Route component={List} path="/list" />
<Route component={Home} path="/home" exact />
</div>
);
}
};
export default connect(null,null)(App);
Компоненты my List и Home отображают строки "Home" и "List"
мой код index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "../shared/App";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import rootReducer from "../shared/reducers/index";
import { BrowserRouter } from 'react-router-dom';
const preloadedState = window.__PRELOADED_STATE__;
delete window.__PRELOADED_STATE__
const store = createStore(rootReducer, preloadedState);
ReactDOM.hydrate(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById("app"));
Это весь мой код, он изменяет URL, но не загружает компонент