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

IT技术 node.js reactjs express react-router
2021-05-12 06:44:25

我正在尝试使用react-router和节点 js 服务器管理react应用程序

我的路由器react： 

        <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 时它再次重定向到 react 应用程序无法弄清楚如何修复它我需要更改什么？谢谢

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);

解决了 ！

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

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

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

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

谢谢你们

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

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

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

我的路由器： 

const router = express.Router({});
router.get('/someurl',(res,req)=>{
       res.status(201).json({ message: "Hello World!" })
});
其它你可能感兴趣的问题
上一篇无法制作安德 3 V1 级别 下一篇解释 G 代码以回答有关生成的形状的几何形状的问题