如何使用 Node Express 路由处理 React Router

Posted 2023-02-21

【中文标题】如何使用 Node Express 路由处理 React Router

【英文标题】：How to handle React Router with Node Express routing

【发布时间】：2019-02-19 10:07:02

【问题描述】：

我正在尝试使用反应路由器和节点 js 服务器管理反应应用程序

我的路由器在反应：

        <BrowserRouter>
        <Switch>
            <PrivateRoute token=token Component=Payments exact path="/payments"/>
            <PrivateRoute token=token Component=User exact path="/user"/>
            <PrivateRoute token=token Component=User exact path=""/>
            <PrivateRoute token=token Component=User exact path="/"/>
        </Switch>
       <BrowserRouter/>

 export const PrivateRoute = (Component, ...rest,token) => 

   return (
    <Route ...rest render=props => token ? (<Component ...props/>) :
        (<Redirect to=pathname: '/login', state: from: props.location/>)

    />
   )

;

和我的 NodeJS 服务器中的路由器：

const app = express();
const server = new Server(app);
const port = process.env.PORT || 5000;
app.use('/api',router);
app.use(express.static(path.join(__dirname, '/../react_dist')));
app.use('*',  (req, res)=> 
 res.sendFile(path.join(__dirname, '/../react_dist', 'index.html'));
);
server.listen(port,()=>
 console.log('Server Is up : ', port)
);

当尝试访问 localhost:5000/user react 应用程序工作正常 但是当我想访问 localhost:5000/api 它再次重定向到反应应用程序 无法弄清楚如何解决它 我需要改变什么？ 谢谢

【问题讨论】：

尝试将app.use('*', (req, res)=> 更改为app.use('/', (req, res)=>

问题出在 react 路由器的那个开关里面。您尚未定义 /api 的路径 - 这意味着如果您没有令牌并且您正在尝试访问某些 url，它将恢复为响应应用程序

@VelimirTchatchevsky 没有帮助：/

@karthik 那么如何处理侧反应路由器到节点 js 的路由？

让你的端口号不同

【参考方案1】：

解决了！

因为我使用 create-react-app cli 创建了 react 应用程序，所以我需要将这一行添加到 package.json 文件中：

“代理”：“http://localhost:5000”

现在当我试图发出这样的 GET 请求时：

axios.get('/api/someurl') 正在按预期工作

谢谢大家

【参考方案2】：

我的路由器：

const router = express.Router();
router.get('/someurl',(res,req)=>
       res.status(201).json( message: "Hello World!" )
);

【参考方案3】：

您的快速路线是什么样的？就像上面用户说的，这真的取决于你的路由器文件是什么样子就行了

app.use('/api', router);

不需要在 react-router 中定义你的 API 路由。但是，我认为您误解了它们如何协同工作。通常 react-router 用于客户端路由，而 express 处理您的后端路由，例如获取数据。您使用反应路由器将用户路由到不同的页面和视图，而您的快速路由只会呈现数据。

【参考方案4】：

您需要定义 Express 路由和控制器以匹配前端请求。

这很可能是无效/未正确配置：app.use('/api',router);

除非您粘贴 router 文件的样子，否则无法确定。

尝试用匹配的前端请求替换它：

app.delete('/api', callbackfunction)
app.get('/api', callbackfunction)
app.put('/api', callbackfunction)
app.post('/api', callbackfunction)

Express 需要一个请求（app.[request]）、一个路由（'/api'）和一个控制器函数（回调函数）。

app.get('/api', (req, res, done) => res.status(201).json( message: "Hello World!" ));

app.use(express.static('client/build'));

app.get('*', (req, res) => res.sendFile(path.resolve('client', 'build', 'index.html')));

app.listen(5000);