javascript - How to configure the rendering server with ReactJS -

i want create universal reactjs app. there following problem. when click on link page full refresh.

server.js

import path "path"; import express "express"; import react "react"; import reactdomserver "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 "react"; import { route, indexroute } "react-router";  import layout "../components/theme/layout";  import home "../components/home"; import "../components/about"; import "../components/help";  export default (     <route path="/" component={layout}>         <route path="/about" component={about} />         <route path="/help" component={help} />         <indexroute component={home} />     </route> ); 

layout.js

import react "react"; import nav "./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 "react"; import { link } "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; 

every reload, server sends browser is:

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> 

why every time page reloaded completely? how fix it?