选项 1

Question

我对 react.js 很陌生，我想知道如何访问浏览器查询参数，例如：fetch('http://localhost:8080/api/teamcomp/getPlayersInComp/{id}')。我已经尝试了在其他 stackoverflow 上找到的一些解决方案，但我无法使 ehm 工作，这是我的代码：

 import React from 'react';
import {useParams} from "react-router-dom";

class TeamComponent extends React.Component {
     constructor(props) {

        super(props);

        this.state = {
            players: [],
            isLoaded: false
        }

    }

    componentDidMount() {
        const {player} = useParams()
        fetch('http://localhost:8080/api/teamcomp/getPlayersInComp/{player}')
            .then(res => res.json())
            .then(json => {
                this.setState({
                    players: json,
                    isLoaded: true, 
                })
            }).catch((err) => {
                console.log(err);
            });

    }

    render() {

        const { isLoaded, players } = this.state;

        if (!isLoaded)
            return <div>Loading...</div>;

        return (
            <div className="App">
                <ul>
                    {players.map(player => (
                        <li key={player.id}>
                            Ign: {player.characterName} | Role: {player.role} | Class: {player.classes}
                        </li>
                    ))}
                </ul>
            </div>
        );

    }

}
export default TeamComponent;

这里是路由：

import React from 'react'
import Home from './Home'
import { BrowserRouter as Router, Route, Switch } from
  'react-router-dom';
import MakeGroupComponent from './MakeGroupComponent';
import TeamComponent from './TeamComponent';

const ReactRouterSetup = () => {
  return (
    <Router>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route exact path='/MakeGroup'>
        <MakeGroupComponent />
      </Route>
      <Route exact path='/Team/:id'>
        <TeamComponent />
      </Route>
    </Router>
  )
}

export default ReactRouterSetup;

任何帮助都会很棒:D

Answer 1

TeamComponent 需要访问 match 道具。 useParams 钩子仅与功能组件兼容。不要忘记修复您的 fetch 请求 url，它应该是一个字符串模板，以便您可以注入路由匹配参数。

选项 1

将 TeamComponent 移动到 component 的 Route 属性，以便将 route props 传递给它。

<Route
  exact
  path='/Team/:id'
  component={TeamComponent}
/>

访问 match 道具。

class TeamComponent extends React.Component {
  ...

  componentDidMount() {
    const { id } = this.props.match.params;
    fetch(`http://localhost:8080/api/teamcomp/getPlayersInComp/${id}`)
      .then(res => res.json())
      .then(json => {
        this.setState({
          players: json,
          isLoaded: true, 
        })
      }).catch((err) => {
        console.log(err);
      });
  }

选项 2

使用 withRouter 高阶组件装饰 TeamComponent 导出以注入路由道具。如上所述访问 match 道具。

import { withRouter } from 'react-router-dom';

class TeamComponent extends React.Component {
  ...

  componentDidMount() {
    const { id } = this.props.match.params;
    fetch(`http://localhost:8080/api/teamcomp/getPlayersInComp/${id}`)
      .then(res => res.json())
      .then(json => {
        this.setState({
          players: json,
          isLoaded: true, 
        })
      }).catch((err) => {
        console.log(err);
      });
  }

  ...
}

export default withRouter(TeamComponent);

选项 3

将 TeamComponent 转换为函数组件。

import { useParams } from "react-router-dom";

const TeamComponent = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [players, setPlayers] = useState([]);

  const { id } = useParams();

  useEffect(() => {
    fetch(`http://localhost:8080/api/teamcomp/getPlayersInComp/${id}`)
      .then((res) => res.json())
      .then((json) => {
        setPlayers(json);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => setIsLoaded(true));
  }, []);

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <div className="App">
      <ul>
        {players.map((player) => (
          <li key={player.id}>
            Ign: {player.characterName} | Role: {player.role} | Class:{" "}
            {player.classes}
          </li>
        ))}
      </ul>
    </div>
  );
};

动态反应路由器

1 个答案:

选项 1

选项 2

选项 3