如何从 express 重定向到 react-router？

Posted 2023-02-21

【中文标题】如何从 express 重定向到 react-router？

【英文标题】：How do I redirect into react-router from express?

【发布时间】：2016-11-01 12:10:18

【问题描述】：

我正在将身份验证添加到我的应用程序中，该应用程序使用 react-router。我在 react-router 中的 auth-flow 示例之后对客户端路由进行了模式化，但使用护照而不是示例使用的本地存储。这一切都很好。

下一步是保护我在server.js 中为 express 定义的路由。我可以将重定向发送到/#/login，但这感觉很脆弱。 在服务器端将 URL 派生到 react-router 提供的登录路由的最佳方法是什么？

这是我现在在 server.js 中的内容，它有效，但感觉很脆弱：

app.get('/protected',
    // redirecting to #/login seems bad: what if we change hashhistory, etc.
    passport.authenticate('local',  failureRedirect: '/#/login'),
    function(req, res) 
     res.render('whatever');
    );

【问题讨论】：

更多您尝试过的代码示例。

是时候提供反馈了吗？

【参考方案1】：

在 express 上配置路由以使用 react-router 获取所有路由和路由，这样，ejem。 （希望对你有帮助）

server.js

import express from 'express'
import path from 'path'

const app = express();

app.use(express.static(__dirname + '/public'));
app.get('*', (req,res) => res.sendFile(path.join(__dirname+'/public/index.html'))).listen(3000,() => console.log('Server on port 3000'))

routes.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import  Router, Route, Link, browserHistory, IndexRedirect  from 'react-router'

import App from '../views/app.jsx'

const Routes = React.createClass(
    render()
        return(
            <Router history= browserHistory >
                <Route path="/" component=App>
                    <IndexRedirect to="/dashboard"/>
                    <Route path="dashboard" name="Dashboard" component=App />
                    <Route path="pages" name="Pages" component=Pages />
                    <Route path="/:Id" component=Page/>
                    <Route path="/:Id/inbox" name=':ids' component=Inbox/>
                </Route>
                <Route path="*" component=App>
                    <IndexRedirect to="/dashboard" />
                </Route>
            </Router>
        );
    
);
ReactDOM.render(<Routes />, document.getElementById('app'))

【讨论】：

app.get('*') 将为css和js等静态文件呈现html页面。如何解决这个问题？