如何使用React前端從URL獲取參數並表達后端？

Question

我正在構建一個具有快速后端的React應用。 我現在在前端添加套接字io聊天功能。 一切都按預期工作，但現在我想從URL訪問參數以設置socket-io通道名稱。

我希望用戶訪問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'));

每當我在網址末尾添加一些內容時（我鍵入“ /”以外的內容時，該頁面均不會顯示。我收到錯誤消息“無法獲取/ foo”

我也嘗試過這樣做，但是前端也不顯示：

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

我的最終目標是僅在用戶訪問localhost:3000/chat/:channelId時顯示聊天應用程序

Answer 1

如果您使用react-router您的方法非常好，您應該能夠從match參數中檢索頻道名稱

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

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

Answer 2

通過引用@mavarazy提供的答案。 您可以將其編寫在類中，並通過props獲取參數。

export default class User extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <h2>You are listening to: {this.props.match.params.id}</h2>
      </div>
   )
  }