Как заставить маршрутизацию работать с ssr react и rails? - PullRequest
Новая
       22

Как заставить маршрутизацию работать с ssr react и rails?

0 голосов
/ 11 июля 2020

В настоящее время я пытаюсь использовать реакцию внутри приложения rails с рендерингом на стороне сервера, хотя реализация маршрутизации действительно сбивает меня с толку. Я просмотрел пару статей и, кажется, не могу понять этого.

Я использую драгоценный камень rails-react на рельсах 6

index. html .erb 

<%= react_component('App', { path: request.path, posts: @posts }, { prerender: true }) %>

Маршрутизатор. js

import React from "react";
import { BrowserRouter, StaticRouter } from "react-router-dom";

const Router = ({ path, children }) =>
  path === undefined || path === null ? (
    <BrowserRouter>{children}</BrowserRouter>
  ) : (
    <StaticRouter location={path} context={{}}>
      {children}
    </StaticRouter>
  );

export default Router;

Приложение js (точка входа для реакции) 

import React from "react";
import { Route, Switch } from "react-router-dom";
import Router from "./Router";
import Home from "./components/view/Home";
import About from "./components/view/About";
import Navbar from "./components/Navbar";
import ErrorPage from "./components/view/ErrorPage";

const App = ({ path, posts }) => {
  return (
    <Router path={path}>
      <Navbar />
      <Switch>
        <Route exact path="/" render={() => <Home posts={posts} />} />
        <Route path="/about" component={About} />
        <Route path="*" component={ErrorPage} />
      </Switch>
    </Router>
  );
};

export default App;

Navbar.jsx

Проблема здесь в том, что нажатие на ссылку ничего не делает. 

import React from "react";
import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <header>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
    </header>
  );
};

export default Navbar;

Итак, глядя на официальную документацию , они возятся с перенаправлениями, которых я не понимаю. все. Но я предполагаю, что это ключ к работе Link. Я могу использовать простые теги привязки, но на самом деле это приведет к полному повторному рендерингу, чего я не хочу.

Маршрутизация отлично работает с BrowserRouter, но это клиентский.

...