如何使用 React-router 复制/粘贴路由并获得“正确"页面? [英] How one can copy/paste a route and get the 'right' page using React-router?
问题描述
路由是在客户端实现的,看起来像:
Routing is implemented on client and looks something like:
<Provider store={ store }>
<Router history={ browserHistory }>
<Route path="/" component={ Layout }>
<IndexRoute component={ Tracking }></IndexRoute>
<Route path="users" component={ UserTable }></Route>
<Route path="user/:login" component={ UserPage }></Route></Route>
</Route>
</Router>
</Provider>
服务器端路由器看起来像:
Server-side router looks something like:
app.get('/', checkAuthStatus, redirect.index);
app.get('*', redirect.UndefinedRoutes);
问题在于,当复制路由(例如/user/32)并将其粘贴到不同的浏览器选项卡或只是刷新页面/user/32 时,客户端向服务器发送请求,服务器又将其解释为请求*"并重定向到 UndefinedRoutes 重定向的任何地方(通常到主页).所以,问题是,如何重定向到正确的路线",在给定的情况下/user/32 ?
The problem is that when one copies a route (for example /user/32) and pastes it in different browser tab or just refreshes page /user/32, the client sends request to server which in its turn interprets it as a request to '*' and redirect wherever UndefinedRoutes redirects (usually to the main page). So, the question is, how to redirect to 'right route', which is in given case /user/32 ?
推荐答案
由于您不进行任何服务器端渲染,因此不需要在服务器上进行路由.你只需要配置一个回退,例如这样:
Since you are not doing any serverside rendering, you don't need routing on the server. You only need to configure a fallback, for example like this:
import fallback from 'express-history-api-fallback';
import express from 'express';
import http from 'http';
// Set up express
const app = express();
const server = http.createServer(app);
const root = `${__dirname}`;
// History Fallback for express
app.use(express.static(root));
app.use(fallback('index.html', { root }));
// Listen
server.listen(8080, '0.0.0.0');
这篇关于如何使用 React-router 复制/粘贴路由并获得“正确"页面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!