How to build a band on a server.



  • 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 (
                &lt;div &gt;
                    &lt;Nav /&gt;
                    {routeComponent}
                &lt;/div &gt;
        );
    }
    

    }

    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>



  • 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>
    );
    }
    }




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2