1

Пытаюсь настроить 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>

2 ответа 2

1

Серверный рендеринг настроен правильно (если с перезагрузкой страницы отдается нужный контент).

Проблема в том, что Вы используете <a href=...></a>. Чтобы использовать на клиенте встроенный роутинг - нужно использовать Link из react-router. Этот компонент как раз позволяет сменить текущий url на клиенте без перезагрузки страницы.

Импортировать его можно 2 путями:

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;

//Первый вариант при сборке для клиента будет занимать меньше места

Пример использования:

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>
    );
  }
}
1
  • Спасибо за ответ, но к сожалению я уже сейчас использую компонент Link из ReactRouter. Я добавил к вопросу исходники компонентов и то что генерирует react-dom/server при получении страницы 12 июл 2016 в 5:55
0

Проблема заключалась в том что express не отдавал статику. Правильный код такой:

app.use(express.static("public"));

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.