node.js - 如何使用 Node Express 路由处理 React Router

Question

我正在尝试使用 React 路由器和 Node 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 应用程序不知道如何修复它我需要改变什么？谢谢

Answer 1

您需要定义 Express 路由和 Controller 来匹配前端请求。

这很可能无效/未正确配置: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')和一个 Controller 函数(回调函数)。

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