Question

我正在尝试使用节点js，React，Redux和React-Router进行服务器端渲染。

我遵循react-router服务器端教程，但无论我放置什么路由，我只获得根路由。正如您在routes.js中看到的那样，我有一条详细的路线。

我也尝试了 path =“detail” 和链接如下所示

 <Link to="/detail"> Detail</Link>

当我点击该链接时，它甚至不会给我一个错误，例如“没有匹配的路线到/详细信息”。

如果您想查看所有代码 - git repo

这是我的代码

routes.js

export default ([
    <Route path="/"  component={App}>
        <Route path="/detail" component={DetailView}/>
    </Route>
]);

server.js

    app.get('/*',(req,res)=>{
    match({ routes:routes, location: req.url }, (error, redirectLocation, renderProps) => {
        if (error) {
            res.status(500).send(error.message)
        } else if (redirectLocation) {
            res.redirect(302, redirectLocation.pathname + redirectLocation.search)
        } else if (renderProps) {
            const store =  createStore(Reducers);
            const html = renderToString(
                <Provider store={store}>
                    <RouterContext {...renderProps} />
                </Provider>
            );
            res.status(200).send(renderFullPage(html, store));
        } else {
            res.status(404).send('Not found')
        }
    })
});

renderFullPage - 这基本上将hder从rederToString注入到html字符串

 <div id="app">${html}</div>
 <script>
    window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
 </script>

client.js（index.js）

const history =createBrowserHistory();
match({ history, routes }, (error, redirectLocation, renderProps) => {
    ReactDom.render(
        <Provider store={store}  >
            <Router {...renderProps} />
        </Provider> , document.getElementById('app'))
});

App.js

class App extends React.Component {
    render() {
        return (
            <div>
                <div className="container">
                    <PokemonContainer />
                </div>
            </div  >
        )
    };
}

感谢您留意并请给我任何意见。

Answer 1

尝试删除前导斜杠：

export default ([
    <Route path="/"  component={App}>
        <Route path="detail" component={DetailView}/>
    </Route>
]);

Answer 2

不确定路由是否存在问题，但您必须将商店状态传递给renderFullPage而不是商店本身。所以它应该是这样的：

} else if (renderProps) {
  const store =  createStore(Reducers);
  const initialState = store.getState()
  const html = renderToString(
    <Provider store={store}>
      <RouterContext {...renderProps} />
    </Provider>
  );
  res.status(200).send(renderFullPage(html, initialState));
}

使用react路由器的服务器端呈现（快速）不起作用

2 个答案: