如何使用 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屋！