Пытаюсь настроить server-side render React'а. Все настроил, но при каждом переходе по ссылке происходит перезагрузка страницы.
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>
);
Почему всегда при клике на ссылку происходит полная перезагрузка страницы?
UPDATE Мои компоненты:
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;
Исходный код index.html при загрузке страницы
<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>