Sorry to interrupt you guys to check my question, I have searched abot my question in stackoverflow and read this before: same question as mine
It mentioned this way to solve this warning, but I don't think this is a really good way to handle the question: suppressHydrationWarning={true} prop can also be used on the rendered element. However, as documentation points, this prop must be used scarcely. The better solution is using hydrate() or render() appropriately.
So, here's my trouble when I use React SSR:
I start up nodejs server, and then I request a route in browser.
When server received my request, it should be returned server render
template to browser.
I can see elements are rendered in first screen which means dom are successfully mounted in .
When I click a element which will trigger route in configuration can also render.For now, everything is all right.
Here comes a thing: when I refresh page in browser which route calls '/text1' or '/text2' will also comes a warning like my question's title: Expected server HTML to contain a matching in .
I suspect whether between my route in nodejs and some particular code in client didn't handle well which caused my question.
Here's my particular code[fake]:
// app.js
const http = require('http')
const fs = require('fs')
const path = require('path')
const demo = require('./demo')
const clientScripts = demo('Client')
let scriptsTag = ''
clientScripts.map((script) => {
scriptsTag += `<script src=${script}></script>`
})
const server = http.createServer((req, res) => {
res.setHeader("Access-Control-Allow-Origin","*");
res.setHeader("Access-Control-Allow-Headers","*");
// ssr
const ssrObj = require('./static/entry/serverEntry')
const dom = ssrObj.inital('server').dom
const store = ssrObj.inital('server').store
// const title = ssrObj.inital('server').title
console.log('in: ', dom)
res.setHeader("Content-Type","text/html;charset=utf-8");
res.end(`
<html>
<head>
<title>React & React Router4 SSR</title>
</head>
<body>
<!-- server side -->
<div id="root">${dom}</div>
<script>window.__PRELOADED_STATE__ = ${JSON.stringify(store)}</script>
<!-- ok with client side -->
${scriptsTag}
</body>
</html>
`);
});
server.listen(1234, () => {
console.log('开始监听1234端口')
})
// demo.js
const path = require('path')
const fs = require('fs')
let targetFile = ''
// suppose webpack configuration are ok, its' server output set in '/dist'
const fileList = fs.readdirSync(path.resolve(__dirname, '../dist'))
const container = []
module.exports = (params) => {
fileList.map((file) => {
const ext = path.extname(file).slice(1)
if (ext === 'js') {
const reg = new RegExp(`${params}`,"gim");
if (reg.test(file)) {
container.push(file)
}
}
})
return container
}
// /entry/serverEntry.js
require('babel-polyfill')
require('babel-register')({
presets: [ 'env' ]
})
const App = require('../common/initalEntry')
module.exports = App
// /entry/client.js
require('babel-polyfill')
require('babel-register')({
presets: [ 'env' ]
})
const App = require('../common/initalEntry')
App.inital('client').dom
// /common/initalEntry.js
import React from 'react';
// dom
import {hydrate} from 'react-dom' // client side use hydrate to replace render in react16
import {renderToString} from 'react-dom/server'
// router
import {StaticRouter, BrowserRouter} from 'react-router-dom'
// store
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import * as reducers from '../store/reducers'
import { App } from './App'
export function inital (url = '') {
if (url === 'server') {
console.log(1, url)
const serverStore = createStore(reducers.counter)
return {
dom: renderToString(
<Provider store={serverStore}>
<StaticRouter location={url} context={{}}>
<App type={url} />
</StaticRouter>
</Provider>
),
store: serverStore
}
} else if (url === 'client') {
console.log(2, url, App)
const clientStore = createStore(reducers.counter, window.__PRELOADED_STATE__)
delete window.__PRELOADED_STATE__
return {
dom: hydrate(
<Provider store={clientStore}>
<BrowserRouter>
<App type={url} />
</BrowserRouter>
</Provider>
, document.getElementById('root')
),
store: clientStore
}
}
}
// common/App.js
import React from 'react';
import {Route, Link} from 'react-router-dom'
class Text1 extends React.Component {
constructor (props) {
super(props)
}
render () {
return (
<div>i am text1.</div>
)
}
}
class Text2 extends React.Component {
render () {
return (
<div>i am text2.</div>
)
}
}
export class App extends React.Component {
constructor (props) {
super(props)
}
componentDidMount () {
console.log(this.props, '<<<<<<<')
}
goTo () {
}
render () {
return (
<div>
<Link to="/text1">go text1</Link>
<Link to="/text2">go text2</Link>
<Route path="/text1" component={Text1}></Route>
<Route path="/text2" component={Text2}></Route>
</div>
)
}
}
Above all, these are my configuration about react ssr which causes this question.Thanks to reviewing my question and pls give me some idea to handle this question.I will very apprciated to your help.
Here's my whole code: just viewing and running the server/ directory is ok
Again, thanks for your help.
I deleted the code in App.js, then no longer show the warning, here's my modify:
import React from 'react';
import {Route, Link} from 'react-router-dom'
export class App extends React.Component {
constructor (props) {
super(props)
}
goTo () {
console.log('click me')
}
render () {
return (
<div>
<p onClick={this.goTo.bind(this)}>123</p>
</div>
)
}
}
// I finally solve this problem when I find something a litte bit strange in /common/initalEntry.js
import React from 'react';
// dom
import {hydrate, render} from 'react-dom'
import {renderToString} from 'react-dom/server'
// router
import {StaticRouter, BrowserRouter} from 'react-router-dom'
// store
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import * as reducers from '../store/reducers'
import { App } from './App'
export function inital (type, url = '') {
if (type === 'server') {
const serverStore = createStore(reducers.counter)
return {
dom: renderToString(
<Provider store={serverStore}>
{/* What I pass in location is a empty value which calls 'url' which causes me a lot of time to figure out what happened.The right way is pass the request url received by node.js server to 'location', then no more warning */}
<StaticRouter location={url} context={{}}>
<App />
</StaticRouter>
</Provider>
),
store: serverStore
}
} else if (type === 'client') {
// ...ignore
}
}
Related
I'm writing unit test with React testing library and Jest and wants to check if my React Component is successfully able to navigate to next Page.
import { fireEvent, render, screen } from "#testing-library/react";
import React from 'react';
import { Provider } from 'react-redux';
import '#testing-library/jest-dom';
import appStore from '../../src/app/redux/store';
import { MemoryRouter, Route } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';
const setup = (initialEntries = []) => {
let inMemHistory = createMemoryHistory({ initialEntries });
const utils = render(
<Router history={inMemHistory}>
<Provider store={appStore}>
<Component-1 />
</Provider>
</Router>
);
const saveButtonElem = screen.getByRole('button', { name: "Save and Continue" });
return {
saveButtonElem,
inMemHistory,
...utils,
}
};
Test:
test('should be able to navigate', async () => {
const {
saveButtonElem,
inMemHistory,
getByText,
queryByText,
queryAllByText,
} = setup(["/component_add"]);
// Content of Test
// Saving Config
fireEvent.click(saveButtonElem);
console.info("Current Path", inMemHistory.location.pathname);
// Got /component_add on console
// Expected /component_data after clicking on save button
})
I've tried waiting for 5 second after clicking save button and then tried to print path, but results are same.
Assuming you use react-router, You can use the Memory router for the testing which is easier and performant. I might have typos or syntax errors as I type without IDE support. But it should help you with idea on what I propose.
Option 1:
it("should route to the expected page", () => {
let mockHistory, mockLocation;
render(
<MemoryRouter initialEntries={["/currentUri"]}>
<Component1 />
// Dummy route that routes for all urls
<Route
path="*"
render={({ history, location }) => {
mockHistory= history;
mockLocation= location;
return null;
}}
/>
</MemoryRouter>
);
// navigate here on event
userEvent.click(screen.getByRole('button', {name: /Save/}));
expect(mockLocation.pathname).toBe("/expectedUri");
});
Option 2:
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';
const renderWithHistory = (initialEntries= [], Component) => {
let inMemHistory = createMemoryHistory({
initialEntries
});
return {
...render(
<Router history={inMemHistory}>
<Component />
</Router >
), history };
};
it("should route to the expected page", () => {
const { history } = renderWithHistory(['/currentUri'], Component1);
// navigate here on event
userEvent.click(screen.getByRole('button', {name: /Save/}));
expect(history.location.pathname).toBe("/expectedUri");
});
I beleive the proper discription of this issue is explained here by timdorr. I tried exporting App.js from the bundle but get window undefined errors. SO still stuck
SSR/Client React Router Dom "Switch" breaks for me with a "Invariant Failed". I believe it says it has something to do with Switch not been allowed outside "Router", which it is inside.
The minimal project link is below, that may be easier way look at the project. I have listed the main files below
1: SERVER SIDE RENDER ENDPOINT
// EXPRESS ROUTER
const express = require("express");
const aRouter = express.Router();
// REACT UTILITIES
import React from "react";
import { renderToNodeStream } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import { createMemoryHistory } from "history";
import Loadable from "react-loadable";
// REDUX UTILITIES
import { init } from "../src/module/store";
import { Provider } from "react-redux";
// CUSTOM COMPONENTS
import App from "../src/App";
// UTILITIES
import fs from "fs-extra";
import renderUtils from "../utils/renderUtils";
// ASSETS
import { initState } from "../assets/store/init";
aRouter.get(["/", "/home"], async function (req, res) {
console.log("RENDER HOME");
try {
// INITIAL WRITE TO CLIENT - START HEAD
res.setHeader('Content-Type', 'text/html');
res.write("<!DOCTYPE html>");
res.write("<html style='scrollbar-width: none;'>");
let headHTML = await fs.readFile("./public/head.html", "utf-8");
let scriptsHTML = await fs.readFile("./public/scripts.html", "utf-8");
res.write(headHTML);
res.write("<body>");
res.write(`<div id = "app-container">`);
// INITALISING STATE
var initialState = initState();
initialState.article.articles = {
"abcde": {
title: "My First Article",
body: "This is my first article"
},
"fghij": {
title: "My Second Article",
body: "This is my second article"
},
"klmno": {
title: "My Third Article",
body: "This is my third article"
}
};
initialState.article.fetched = true;
initialState.ui.user = { type: "" };
initialState.ui.global = {
team: "Arsenal",
teamID: 19
};
const history = createMemoryHistory({ initialEntries: [req.originalUrl] });
const store = init(history, initialState);
// THE ISSUE SEEMS TO BE TO DO WITH THIS SERVER SIDE STATIC BROWSER AND THE CLIENT BORWSER ROUTER
const stream = renderToNodeStream(
<Provider store = {store}>
<StaticRouter history = {history} location = {req.originalUrl} context = {{}}>
<App />
</StaticRouter>
</Provider>
);
stream.pipe(res, { end: false });
stream.on("end", renderUtils.onRenderEnd.bind(this, res, store, scriptsHTML));
} catch (err) { renderUtils.onRenderError.bind(this, res, "RENDER HOME ERROR", err.message); }
});
var self = (module.exports = aRouter);
2: CLIENT INDEX
// REACT
import React from "react";
import ReactDOM from "react-dom";
import Loadable from "react-loadable";
import { BrowserRouter } from "react-router-dom";
import { createMemoryHistory } from "history";
import { Provider } from "react-redux";
// REDUX
import { init } from "./module/store";
// CREATE STORE
let history = createMemoryHistory();
let store = init(history, window.INITIAL_STATE);
// MAIN APP COMPONENT
import App from "./App";
// MOUNTED STYLES
import "./style/client/index.scss";
const renderApp = () => {
ReactDOM.hydrate(
<Provider store = {store}>
<BrowserRouter history = {history}>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("app-container")
);
};
store.subscribe(() => renderApp());
3: APP - CLIENT
// REACT
import React, { PureComponent } from "react";
import { Switch, Route } from "react-router-dom";
import PropTypes from "prop-types";
// REDUX STORE
import { connect } from "react-redux";
import { getName, getAge, getPosition } from "./module/user/userReducer";
import { getUIElement, setUIElement } from "./module/uiReducer";
// IMPORT CUSTOM COMPONENTS
import Routes from "./Routes";
class App extends PureComponent {
componentDidMount = () => this.props.setUI("user", "type", "admin");
render = () => {
return (
<div className = "app">
<span>My App</span>
<span>Name : {this.props.name}</span>
<span>Age : {this.props.age}</span>
<span>Position : {this.props.position}</span>
<span>Team : {this.props.team}</span>
<span>Team ID : {this.props.teamID}</span>
<span>Type : {this.props.type}</span>
<div>
<Switch>
<Route path = "/" component = {MyLocation} />
<Route path = "/contact" render = {() => (<MyLocation location = "Contact" />)} />
</Switch>
</div>
</div>
);
};
};
App.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
position: PropTypes.string.isRequired,
team: PropTypes.string.isRequired,
teamID: PropTypes.number.isRequired,
type: PropTypes.string.isRequired,
setUI: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
name: getName(state),
age: getAge(state),
position: getPosition(state),
team: getUIElement(state, "global", "team"),
teamID: getUIElement(state, "global", "teamID"),
type: getUIElement(state, "user", "type")
});
const mapDispatchToProps = dispatch => ({
setUI: (component, element, value) => dispatch(setUIElement({ component, element, value }))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
The full minimal react app here
It just breaks when I add the Switch and Routes. The Switch "IS INSIDE" the Browser Router. I have read articles which explain to send the same React Router Dom to the client, but I tried them explanations and they dont work for me.
To run the project simply run "yarn", "npm run build" and "npm start". The app has just one page with some filler text
Issue : Breaks at Switch
Required: Work at Switch
Tried: Explantions that explain to bring same instance of react-router-dom to client from server and use webpack alies etc.
Timdorr (Shared at start of question) explains this.
There is a new React.createContext API that we use in 5.0 to replace the legacy context usage. This involves creating a "context" pair, a set of Provider and Consumer components. We create that in a singleton module that is imported into Router and Link directly. In this new API, you have to use the exact same instance. Two separately-created contexts will never match up and won't be visible to each other.
Whats also funny is this works live on Heroku "production", but doesnt work locally "production". Im thinking heroku have some fallback code catching it.
Any help be great;
Daniel
After a lot of playing around I discovered the issue stemmed from
import { withRouter } from "react-router-dom";
export default withRouter(Component);
I think withRouter doesn't exists anymore on this new version and as as to why it worked with Heroku is a mystery. I think Heroku has great version controlling and debugging/handling.
I started using the hook useHistory instead and converted my classic components to function component with hooks and all is well now
Daniel
I am creating a blogging application using React with Server Side Rendering functionality. I create the application using Create React App.
I encounter an issue where my data coming from the server is rendered for a second then gone after react takes over the rendering process. I am using React Router Dom to pass the data from the server to the client react. Basically I am following this tutorial to create the application https://www.youtube.com/watch?v=NwyQONeqRXA but the video is lacking some information like getting the data on the API. So I reference this repository for getting the data on the API https://github.com/tylermcginnis/rrssr
Base on resources I gathered I ended up the following codes.
server.js
import express from "express";
import fs from "fs";
import path from "path";
import { StaticRouter, matchPath } from "react-router-dom";
import React from "react";
import ReactDOMServer from "react-dom/server";
import serialize from "serialize-javascript";
import App from "../src/App";
import routes from "../src/routes";
const app = express();
const PORT = 3001;
app.use(express.static(path.resolve(__dirname, "..", "build")));
app.get("*", (req, res, next) => {
// point to the html file created by CRA's build tool
const filePath = path.resolve(__dirname, "..", "build", "index.html");
fs.readFile(
path.resolve(filePath),
"utf-8",
(err, html_data) => {
if (err) {
console.error(err);
return res.status(500).send(`Some error happened: ${err}`);
}
const activeRoute =
routes.find(route => matchPath(req.url, route)) || {};
const promise = activeRoute.fetchInitialData
? activeRoute.fetchInitialData(req.path)
: Promise.resolve();
promise
.then(rawData => {
console.log('rawData', rawData[0]);
const context = { posts: rawData };
const markup = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
return res
.status(200)
.send(
html_data
.replace(
'<div id="root" class="container-fluid"></div>',
`<div id="root" class="container-fluid">${markup}</div>`
)
.replace(
"__INITIAL_DATA__={}",
`__INITIAL_DATA__=${serialize(rawData)}`
)
);
})
.catch(next);
}
);
});
app.listen(PORT, () => {
console.log(`App launched at http://localhost:${PORT}`);
});
Node JS Server entry point index.js
require("ignore-styles");
require("#babel/register")({
ignore: [/(node_modules)/],
presets: ["#babel/preset-env", "#babel/preset-react"]
});
require("./server");
Client react index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";
import "./index.css";
import "./fonts/VarelaRound-Regular.ttf";
ReactDOM.hydrate(
<BrowserRouter>
<App post_data={window.__INITIAL_DATA__} />
</BrowserRouter>,
document.getElementById("root")
);
Clieant react App.js
import React, { Component } from "react";
import "./App.css";
import { Route, Link, Redirect, Switch } from "react-router-dom";
import routes from "./routes";
class App extends Component {
render() {
return (
<div>
<Switch>
{routes.map(
({ path, exact, component: Component, ...rest }) => (
<Route
key={path}
path={path}
exact={exact}
render={props => (
<Component {...props} {...rest} />
)}
/>
)
)}
</Switch>
</div>
);
}
}
export default App;
When I am trying to output the data on the component it was gone and now staticContext pass from the server is undefined. What seems to be the issue here? Am I missing some configuration or library?
import React from "react";
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: this.props.staticContext
? this.props.staticContext.posts
: []
};
console.log("constructor", this.props); // STATIC CONTEXT UNDEFINED ON THIS OUTPUT
}
componentDidMount() {
console.log("componentDidMount", this.props);// STATIC CONTEXT UNDEFINED ON THIS OUTPUT
}
}
I'm working with server side rendering for my React Js App.showing page content and routes are working fine.but when i hit 'page source',it's not showing all content inside html.also when i navigate to another page and hit 'page source',it's not updated old html.
Any idea about this issue?
server.js
import 'babel-polyfill';
import express from 'express';
import { matchRoutes } from 'react-router-config';
import Routes from './client/Routes';
import renderer from './helpers/renderer';
import createStore from './helpers/createStore';
const app = express();
app.use(express.static('public'));
app.get('*', (req, res) => {
const store = createStore(req);
const promises = matchRoutes(Routes, req.path)
.map(({ route }) => {
return route.loadData ? route.loadData(store) : null;
})
.map(promise => {
if (promise) {
return new Promise((resolve, reject) => {
promise.then(resolve).catch(resolve);
});
}
});
Promise.all(promises).then(() => {
const context = {};
const content = renderer(req, store, context);
res.send(content);
});
});
app.listen(3000, () => {
console.log('Listening on prot 3000');
});
renderer.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { renderRoutes } from 'react-router-config';
import serialize from 'serialize-javascript';
import { Helmet } from 'react-helmet';
import Routes from '../client/Routes';
export default (req, store, context) => {
const content = renderToString(
<Provider store={store}>
<StaticRouter location={req.path} context={context}>
<div>{renderRoutes(Routes)}</div>
</StaticRouter>
</Provider>
);
const helmet = Helmet.renderStatic();
return `<!doctype html>
<html lang="en">
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
</head>
<body>
<div id="root">${content.toString()}</div>
<script>
window.INITIAL_STATE = ${serialize(store.getState())}
</script>
<script src="bundle.js"></script>
</body>
</html>
`;
};
App.js
import React from 'react';
import { renderRoutes } from 'react-router-config';
import { fetchHomeSliders } from './actions/home';
const App = ({ route }) => {
return (
<div>
{renderRoutes(route.routes)}
</div>
);
};
export default {
component: App,
loadData: ({ dispatch }) => dispatch(fetchHomeSliders())
};
Routes.js
import React from 'react';
import App from './App';
import HomePage from './components/home';
import About from './components/about';
export default [
{
...App,
routes: [
{
...HomePage,
path: '/',
exact: true
}
,
{
...About,
path: '/about-us'
}
]
}
];
fetchHomeSliders API
export const fetchHomeSliders = () => async (dispatch, getState, api) => {
const request = await api.get(`https://example.com/api/contents/ABOUT`);
dispatch ({type: FETCH_HOME_SLIDERS, payload: request});
console.log("request request",request)
};
The reason why it might be happening is that on doing view page source only the server rendered page is shown in SSR website.
So anything you do on the client like add an html element or listener will be seen only it the inspect element.The inspect
element is kind of dynamic meaning that it updates itself to server as well as client side changes.So whenever you are doing anything like
show/hide a div/button, it will be shown in the inspect element. Whereas when you try to View page souce what happens is it hits the server and
whatever HTML content the server returned it will show.
As an example you can check https://preactjs.com/. If you do View page souce in it the html content is very less and won't contain
majority of elements compared to inspect element.So here only a part of the html is sent by Server and majority of things happen on
client side.
For your case I think you need to hydrate elements rendered by server.It will ensure that the content is the same on
the server and the client and won't override it.
Something like
import React from 'react'
import {hydrate} from 'react-dom'
import {Provider} from 'react-redux'
import configureStore from './redux/configureStore'
import App from './components/app'
const state = window.__STATE__;
delete window.__STATE__;
const store = configureStore(state)
//Here we are hydrating.
hydrate(
<Provider store={store} >
<App />
</Provider>,
document.querySelector('#app')
)
Also you can check in network request if server is returning content.toString()
Hope that helps.
I've the following app:
Client
index.js
import React from "react";
import ReactDOM from "react-dom";
import Root from "./containers/Root";
import configureStore from "./store/configureStore";
import { browserHistory } from "react-router";
import { loginUserSuccess } from "./actions/auth";
import { syncHistoryWithStore } from "react-router-redux";
const target = document.getElementById("root");
const store = configureStore(browserHistory, window.__INITIAL_STATE__);
// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store)
const node = (
<Root store={store} history={history} />
);
let token = localStorage.getItem("token");
if (token !== null) {
store.dispatch(loginUserSuccess(token));
}
ReactDOM.render(node, target);
Root.js
import React from "react";
import {Provider} from "react-redux";
import AppRouter from "../routes/appRouter";
export default class Root extends React.Component {
static propTypes = {
store: React.PropTypes.object.isRequired,
history: React.PropTypes.object.isRequired
};
render () {
return (
<Provider store={this.props.store}>
<AppRouter history={this.props.history}>
</AppRouter>
</Provider>
);
}
}
AppRouter (routes/appRouter.js
import React from "react";
import routes from "./routes";
import { Router } from "react-router";
export default (
<Router routes={routes} history={this.props.history}></Router>
)
routes (routes/routes.js)
import React from "react";
import {Route, IndexRoute} from "react-router";
import { App } from "../containers";
import {HomeView, LoginView, ProtectedView, NotFoundView} from "../views";
import {requireAuthentication} from "../components/core/AuthenticatedComponent";
export default (
<Route path='/' component={App} name="app" >
<IndexRoute component={requireAuthentication(HomeView)}/>
<Route path="login" component={LoginView}/>
<Route path="protected" component={requireAuthentication(ProtectedView)}/>
<Route path="*" component={NotFoundView} />
</Route>
)
requireAuthentication (/component/core/AuthenticatedComponent.js)
import React from "react";
import {connect} from "react-redux";
import { push } from "react-router-redux";
export function requireAuthentication(Component) {
class AuthenticatedComponent extends React.Component {
componentWillMount () {
this.checkAuth(this.props.isAuthenticated);
}
componentWillReceiveProps (nextProps) {
this.checkAuth(nextProps.isAuthenticated);
}
checkAuth (isAuthenticated) {
if (!isAuthenticated) {
let redirectAfterLogin = this.props.location.pathname;
this.props
.dispatch(push(`/login?next=${redirectAfterLogin}`));
}
}
render () {
return (
<div>
{this.props.isAuthenticated === true
? <Component {...this.props}/>
: null
}
</div>
)
}
}
const mapStateToProps = (state) => ({
token: state.auth.token,
userName: state.auth.userName,
isAuthenticated: state.auth.isAuthenticated
});
return connect(mapStateToProps)(AuthenticatedComponent);
}
configureStore.js
import rootReducer from "../reducers";
import thunkMiddleware from "redux-thunk";
import {createStore, applyMiddleware, compose} from "redux";
import {routerMiddleware} from "react-router-redux";
import {persistState} from "redux-devtools";
import createLogger from "redux-logger";
import DevTools from "../dev/DevTools";
const loggerMiddleware = createLogger();
const enhancer = (history) =>
compose(
// Middleware you want to use in development:
applyMiddleware(thunkMiddleware, loggerMiddleware, routerMiddleware(history)),
// Required! Enable Redux DevTools with the monitors you chose
DevTools.instrument(),
persistState(getDebugSessionKey())
);
function getDebugSessionKey() {
if(typeof window == "object") {
// You can write custom logic here!
// By default we try to read the key from ?debug_session=<key> in the address bar
const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/);
return (matches && matches.length > 0)? matches[1] : null;
}
return;
}
export default function configureStore(history, initialState) {
// Add the reducer to your store on the `routing` key
const store = createStore(rootReducer, initialState, enhancer(history))
if (module.hot) {
module
.hot
.accept("../reducers", () => {
const nextRootReducer = require("../reducers/index");
store.replaceReducer(nextRootReducer);
});
}
return store;
}
Server
server.js
import path from "path";
import { Server } from "http";
import Express from "express";
import React from "react";
import {Provider} from "react-redux";
import { renderToString } from "react-dom/server";
import { match, RouterContext } from "react-router";
import routes from "./src/routes/routes";
import NotFoundView from "./src/views/NotFoundView";
import configureStore from "./src/store/configureStore";
import { browserHistory } from "react-router";
// import { syncHistoryWithStore } from "react-router-redux";
// initialize the server and configure support for ejs templates
const app = new Express();
const server = new Server(app);
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "./"));
// define the folder that will be used for static assets
app.use("/build", Express.static(path.join(__dirname, "build")));
// // universal routing and rendering
app.get("*", (req, res) => {
const store = configureStore(browserHistory);
match(
{ routes, location: req.url },
(err, redirectLocation, renderProps) => {
// in case of error display the error message
if (err) {
return res.status(500).send(err.message);
}
// in case of redirect propagate the redirect to the browser
if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
}
// generate the React markup for the current route
let markup;
if (renderProps) {
// if the current route matched we have renderProps
// markup = renderToString(<Provider store={preloadedState} {...renderProps}/>);
markup = renderToString(
<Provider store={store} >
<RouterContext {...renderProps} />
</Provider>
);
} else {
// otherwise we can render a 404 page
markup = renderToString(<NotFoundView />);
res.status(404);
}
// render the index template with the embedded React markup
const preloadedState = store.getState()
return res.render("index", { markup, preloadedState });
}
);
});
// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || "production";
server.listen(port, err => {
if (err) {
return console.error(err);
}
console.info(`Server running on http://localhost:${port} [${env}]`);
});
I don't know if I'm initializing correctly my store on the server-side.
How do I know this? Because renderProps is always null and thereby it returns NotFoundView.
However I made some modifications since I understood that my routes were being initialized incorrectly.
This made me use my configureStore(...) (which I use on client-side and it's working) on the server-side.
Now I'm getting the following error:
TypeError:Cannot read property 'push' of undefined
This error happens on AuthenticatedComponent in the following line:
this.props
.dispatch(push(`/login?next=${redirectAfterLogin}`));
It's strange since this works on client-side and on server-side it just throws this error.
Any idea?
PS
Am I doing it correctly by using the same Routes.js in client and server?
And the same for my configureStore(...)?
All the examples I see, they use a different approach to create the server-side store, with createStore from redux and not their store configuration from client-side.
PS2
I now understand that push may not work on server, only client (right?). Is there any workaround for this?
PS3
The problem I was facing was happening because I was rendering <Router /> into server, and my routes.js should only contain <Route /> nodes.
However, after a while I discovered that history shouldn't be configured in server and I just configured my store and passed it to the <Provider /> being rendered.
But now I need to compile my JSX and it throws:
Error: Module parse failed: D:\VS\Projects\Tests\OldDonkey\OldDonkey.UI\server.js Unexpected token (46:20)
You may need an appropriate loader to handle this file type.
| // markup = renderToString(<Provider store={preloadedState} {...renderProps}/>);
| markup = renderToString(
| <Provider store={store} >
| <RouterContext {...renderProps} />
| </Provider>