How to build a band on a server.

[Duquan]

Trying to build server-side render React'a. It's all set, but every shift in the reference is rebooting the page.

server.js

import path from "path";
import express from "express";
import React from "react";
import ReactDOMServer from "react-dom/server";
const Router = require("react-router");
const RouterContext = require("react-router").RouterContext;
const routes = require("./Scripts/Configs/RouteConfig");
const app = express();

const port = 3000;
app.use(express.static(path.join(__dirname, "../", "public")));
app.set("views", path.join("src", "Views"));
app.get("*", (req, res) => {

Router.match({ routes: routes.default, location: req.url }, (err, redirectLocation, renderProps) => {

if (err) {

res.status(500).send(err.message);

} else if (redirectLocation) {

res.status(302).redirect(redirectLocation.pathname + redirectLocation.search);

} else if (renderProps) {

res.status(200).render("index.ejs", {

reactOutput: ReactDOMServer.renderToString(<RouterContext {...renderProps} />)

});

} else {

res.status(404).send("Page Not Found");

}

});

});
app.listen(port, () => {

console.log("App listening on port 3000!");

});

RouteConfig.js

import React from "react";

import { Route, IndexRoute } from "react-router";

import Layout from "../Components/Theme/Layout";
import Home from "../Components/Home";

import About from "../Components/About";

import Help from "../Components/Help";
export default (

<Route path="/" component={Layout}>

<Route path="/about" component={About} />

<Route path="/help" component={Help} />

<IndexRoute component={Home} />

</Route>

);

Why is there always a complete reset of the page when it comes to the link?

UPDATE My components:

Layout.js

import React from "react";

import Nav from "./Nav";

class Layout extends React.Component {

render() {

const { children: routeComponent } = this.props;
    return (
            <div >
                <Nav />
                {routeComponent}
            </div >
    );
}

}
Layout.propTypes = {

children: React.PropTypes.element

};
export default Layout;

Nav.js

import React from "react";

import { Link } from "react-router";

class Nav extends React.Component {

render() {

return (

<ul>

<li><Link to="/">Home</Link></li>

<li><Link to="/about">About</Link></li>

<li><Link to="/help">Help</Link></li>

</ul>

);

}

}

export default Nav;

Reference code index.html for downloading page

<div id="root">

<div data-reactroot="" data-reactid="1" data-react-checksum="904225187">

<ul data-reactid="2">

<li data-reactid="3">

<a href="/" data-reactid="4">Home</a>

</li>

<li data-reactid="5">

<a href="/about" data-reactid="6">About</a>

</li>

<li data-reactid="7">

<a href="/help" data-reactid="8">Help</a>

</li>

</ul>

<div data-reactid="9">home</div>

</div>

</div>

[Kadir]

The serial rendering is correct (if the reset of the page gives the right content).

The problem is you're using. <a href=...></a>♪ To use built-in rolling on a client, you need to use Link from react-router. This component enables the change of current url on the client without reloading the page.

It can be imported in two ways:

import Link from 'react-router/lib/Link'; 
//var Link = require('react-router/lib/Link');
//либо
import { Link } from 'react-router';

//var Link = require('react-router').Link;
//Первый вариант при сборке для клиента будет занимать меньше места

Example of use:

import React from 'react';

import Link from 'react-router/lib/Link';

class TestLink extends React.Component {

render(){

return (

<div>

<Link to='/url'>переход без перезагрузки страницы</Link>

<a href='/url'>переход с перезарузкой страницы</a>

</div>

);

}

}