javascript - 如何使用React前端和express后端从url获取参数？

Question

我正在构建一个带有快速后端的 React 应用程序。我现在正在向前端添加套接字 io 聊天功能。一切都按预期工作，但现在我想从 url 访问参数来设置套接字 io channel 名称。

我希望用户访问localhost:3000/foo并且react前端能够访问foo参数。

最好的方法是什么？

目前我正在提供静态文件，如下所示:

app.use(express.static(`${__dirname}/../client/dist`));

我尝试使用以下代码添加react-router-dom，但它根本不显示页面:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import App from './components/App.jsx';

ReactDOM.render(
  <Router>
    <Route path="/:id" component={App} />
  </Router>,
  document.querySelector('#app'));

每当我在网址末尾添加某些内容时(我输入“/”以外的内容，页面不会显示。我收到错误“cannot GET/foo”

我也尝试过这个，但前端也不显示:

app.get('/:id', (req, res) => {
  console.log('-----------', req.params.id)
})

我的最终目标是仅在用户访问localhost:3000/chat/:channelId时显示聊天应用程序

Answer 1

如果您使用react-router，您的方法非常好，您应该能够从match参数检索 channel 名称

const App = ({ match }) => (
  <div>
    <h2>You are listening to: {match.params.id}</h2>
  </div>
)

查看https://reacttraining.com/react-router/web/example/ambiguous-matches