Question

我正在建立一个带有快速后端的反应应用程序。我现在正在向前端添加socket io聊天功能。一切都按预期工作，但现在我想从URL访问params来设置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的末尾添加一些东西（我在'/'以外的其他地方输入的内容都没有显示。我得到错误“不能GET / 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>
   )
  }

如何通过React前端和表达后端从url获取params？

2 个答案: