0

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

我希望用户访问localhost:3000/foo并且反应前端能够访问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'));

每当我在 url 的末尾添加一些东西时（我输入的东西不是 '/' 页面不显示。我收到错误“cannot GET /foo”</p>

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

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

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

4

2 回答 2

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

于 2018-01-29T08:12:52.983 回答
0

通过参考@mavarazy 提供的答案。您可以将它写在一个类中并通过道具获取参数。

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>
   )
  }
于 2019-08-12T11:49:19.080 回答