React Router v4 not loading component

Question

For some reason, my web app is not directing to the component whenever I go to the parameters. Specifically, it is not going to the Battle component.

Here is what the navigation looks:

    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;

In the SelectPlayers component, whenever the user presses a button it runs:

    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;

On the Battle component, I write some console.log stuff just to check if the Component loaded. However, whenever I go to that parameter, none of the code in my componentDidMount is running. I don't see any of the console.logs I wrote in componentDidMount in my developer console. Here is the component:

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;

You can see the code at this repo: https://github.com/tarekgabarin/github_compete

It would be greatly appreciated if anyone helped me.

Answer 1

As per your new comment that code is working without queryset, looks like there is some problem with your queryset parameters. As suggested in comment box, don't define Router with queryset.

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

In your SelectPlayers component, navigate to next page with queryset.

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

On Battle component, use (query-string) to read the parameter. For example:

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

Please note that my above code is not tested.

Thanks