如何使路由与SSR React和Rails一起使用？

Question

我目前正在尝试在带有服务器端渲染的Rails应用程序中使用react，尽管实现路由确实使我感到困惑。我读了几篇文章，似乎无法弄清楚。

我正在使用rails-react宝石，在轨道6上

index.html.erb

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

Router.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;

App.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;

因此，看着official documentation，他们搞砸了重定向，我根本不明白。但是我假设这就是使Link工作的关键。我可以使用简单的锚标记，但这实际上会触发完全重新渲染，这是我不想要的。

路由可以与BrowserRouter一起正常工作，但这是在客户端进行的。