javascript - React Router v4 未加载组件

Question

出于某种原因，每当我访问参数时，我的网络应用程序都不会定向到该组件。具体来说，它不会进入 Battle 组件。

导航的外观如下:

    import React from 'react';
import Header from './components/Header/Header';
import SelectPlayers from './pages/SelectPlayers/SelectPlayers';
import Popular from './pages/Popular/Popular'
import Battle from './pages/Battle/Battle'

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

function App() {
  return (
      <Router>
          <div className={'flex flex-column'}>
              <Header />

              <Switch>
                  <Route exact path={'/'} component={Popular}/>
                  <Route exact path={'/battle/select-player'} component={SelectPlayers} />
                  <Route exact path={'/results?playerOne=:playerOne&playerTwo=:playerTwo'} component={Battle} />
              </Switch>

          </div>

      </Router>
  );
}

export default App;

在 SelectPlayers 组件中，每当用户按下按钮时，它就会运行:

    import React, {useState} from 'react';

function SelectPlayers(props) {


    const [playerOne, setPlayerOne] = useState('');
    const [playerTwo, setPlayerTwo] = useState('');

    function setPlayerName(event, player){

        if (player === 1){
            setPlayerOne(event.target.value)

        } else if (player === 2) {
            setPlayerTwo(event.target.value)
        }
    }


    function goToBattle(event){

        event.preventDefault();

        props.history.push(`/results?playerOne=${playerOne}&playerTwo=${playerTwo}`)

    }


    return (
        <div className={'pa3 mh7-l mh7-m'}>
            <div className="flex flex-column">


                <div className={'mb1'}>
                    <h1 className={'mb0'}>Player One</h1>
                    <input onChange={(e) => setPlayerName(e, 1)} type="text" placeholder={'github username'} className={'input-reset pa1 w-100 h2 ba b--black br2'}/>
                </div>

                <div className="tc dark-red">
                    <h1>Versus</h1>
                </div>

                <div className={'mb3'}>
                    <h1 className={'mb0 mt0 tr'}>Player Two</h1>
                    <input onChange={(e) => setPlayerName(e, 2)}  type="text" placeholder={'github username'} className={'input-reset pa1 w-100 h2 ba b--black br2'}/>
                </div>

                <div>
                    <button onClick={(e) => goToBattle(e)} className={'input-reset pa1 h2 fw1 bg-black white ba w-100 b--black br2'}>Battle</button>
                </div>

            </div>
        </div>
    );
}

export default SelectPlayers;

在 Battle 组件上，我编写了一些 console.log 内容，只是为了检查组件是否已加载。但是，每当我转到该参数时，我的 componentDidMount 中的代码都没有运行。我在开发者控制台中没有看到我在 componentDidMount 中编写的任何 console.logs。这是组件:

import React, {Component} from 'react';

class Battle extends Component {

    constructor(props){
        super(props)
    }

    componentDidMount() {

        console.log('runngins');


        console.log(this.props);
    }


    render() {
        return (
            <div className={'pa3 mh7-l mh7-m'}>

                <div className="flex flex-column">

                </div>

            </div>
        );
    }
}

export default Battle;

您可以在此存储库中看到代码:https://github.com/tarekgabarin/github_compete

如果有人帮助我，我将不胜感激。

Answer 1

根据您的新评论，代码在没有查询集的情况下也可以工作，看起来您的查询集参数存在一些问题。 正如评论框中的建议，不要使用查询集定义 Router。

<Switch>
              <Route exact path={'/'} component={Popular}/>
              <Route exact path={'/battle/select-player'} component={SelectPlayers} />
              <Route exact path={'/results'} component={Battle} />
          </Switch>

在 SelectPlayers 组件中，使用查询集导航到下一页。

props.history.push("/results?playerOne=" +playerOne+ "&playerTwo=" +playerTwo)

在Battle组件中，使用(query-string)读取参数。例如:

const values = queryString.parse(this.props.location.search);
const player_one = values.playerOne
const player_two = values.playerTwo

请注意，我的上述代码未经测试。

谢谢