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 не выполняется. Я не вижу ни одного файла console.logs, который я написал в componentDidMount, в моей консоли разработчика. Вот компонент:

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

Согласно вашему новому комментарию, код работает без набора запросов, похоже, что есть какие-то проблемы с параметрами вашего набора запросов. Как указано в поле для комментариев, не определяйте Маршрутизатор с набором запросов.

<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 используйте ( строка запроса ) для чтения параметра. Например:

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

Обратите внимание, что мой код выше не проверен.

Спасибо