React Router 通用在初始请求上加载不同的路由 301

Question

我有一种特殊情况，我想在保持应用通用/同构的同时加载不同的路由而不是初始请求路由。

所以我有一些这样的路线

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <Route path="potato" component={Potato}/>
    <Route path="apple" component={Apple}/>
   </Route>
</Router>

在 / 的初始请求时，服务器根据其他地方的一些其他信息决定应该加载哪些其他路由，即应该渲染苹果路由，但前端的 url 应该保留 /

起初这很简单，因为您只需更改提供的 url 以匹配

match({ routes, location: url }, (error, redirectLocation, renderProps) => {

但是，客户端首先正确显示，然后在加载原始请求路由而不是服务器决定的几秒钟后显示。 它会显示这样的错误

警告：React 尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且在服务器上生成的标记不是客户端所期望的。 React 注入了新的标记来补偿哪些工作，但是您已经失去了服务器渲染的许多好处。相反，请弄清楚为什么在客户端或服务器上生成的标记不同：

这是有道理的，因为我告诉服务器在 / 路由被命中时渲染 /apple。但是当它到达客户端时，它会显示'嗯，路线是/但标记显示的内容与应该存在的不同。

那么无论如何我可以欺骗客户一切都很好并且正确吗？

一种解决方案就是执行 301 重定向，但这意味着客户端 最终会在 url 中显示 /apple 而不仅仅是 /

我想避免 301 用于 SEO 并保留用户输入的初始 url 路由

这个疯狂的请求有什么解决方案吗？

我正在使用

反应：15.0.2

反应路由器：2.4.0

react-redux:4.1.2

redux：3.1.2

Answer 1

您可以在调用match之前在服务器上定义路由，让客户端在客户端上接。

服务器上是这样的：

function getRoutes(something) {
    if (something === 'apple') {
        return (
            <Route path="/" component={Apple}>
                <Route path="potato" component={Potato}/>
            </Route>
            );
    }

    return (
        <Route path="/" component={App}>
            <Route path="potato" component={Potato}/>
            <Route path="apple" component={Apple}/>
        </Route>
        );
}

const routes = getRoutes('apple');
<script dangerouslySetInnerHTML={{__html: `window.__INITIAL_ROUTES__ = ${routes}`}}></script>
<Router history={createMemoryHistory()}>
    {routes}
</Router>

...在客户端上：

const routes = window.__INITIAL_ROUTES__;
<Router history={browserHistory}>
    {routes}
</Router>