ReactJS URL बदल रहा है लेकिन पेज w/BrowserRouter नहीं

इसलिए, मुझे पता है कि इसके बारे में बहुत सारे प्रश्न हैं और मैं लंबे समय से इसका समाधान खोज रहा हूं, लेकिन कुछ भी काम नहीं कर रहा है और मैं रिएक्टजेएस में लगभग एक नौसिखिया हूं ...

जब मैं अपने बटन पर क्लिक करता हूं, यूआरएल लिंक बदल जाता है, लेकिन पेज अभी भी वही है। मैं एक गेम (वास्तव में एक प्रश्नोत्तरी) बनाने की कोशिश कर रहा हूं जिसमें कुछ स्तर हैं, इसलिए घटक हमेशा समान होता है लेकिन विभिन्न डेटा के साथ।

बेहतर व्याख्या करने के लिए:

App.js

import React from 'react';
import './App.css';
import {dataSet1, dataSet2} from './data/dataSet.js'
import Quiz from './Quiz.js'
import {BrowserRouter,Switch,Route, Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';


class App extends React.Component {
  render() {
    var style = {
      width: "25%",
      backgroundColor: "green",
      float: "center",
      padding: "12px 28px",
      textAlign: "center",
      color: "white",
    }

    return(
      <div>
        <BrowserRouter>
          <Button style={style} component={Link} to="/level1">Play</Button>
          <Switch>
            <Route exact path="/level1" component={withRouter(Quiz)}>
              <Quiz level={1} data={dataSet1}/>
            </Route>
            <Route path="/level2" component={withRouter(Quiz)}>
              <Quiz level={2} data={dataSet2}/>
            </Route>
          </Switch>  
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

प्रश्नोत्तरी.जेएस

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, level: props.level, dataSet:props.data, correct:0, incorrect:0}
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.state.dataSet[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.state.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.state.dataSet[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

जब मैं "नेक्स्ट लेवल" पर क्लिक करता हूं तो मेरा यूआरएल http://localhost:3000/level2 में बदल जाता है। लेकिन पेज नहीं बदल रहा है। हालांकि, अगर मैं पृष्ठ को रीफ्रेश करता हूं, तो यह ठीक काम करता है और मेरा पृष्ठ जैसा होना चाहिए वैसा ही प्रस्तुत किया जाता है। इसके अलावा, अगर मैं अपने लेवल 2 रूट में होने पर "प्ले" पर क्लिक करता हूं, तो ऐसा ही होता है: यूआरएल http://localhost:3000/level1 लेकिन मेरा पेज मुझे लेवल2 दिखा रहा है।

फिर से शुरू:

मैं पेज को रीफ्रेश किए बिना लेवल 1 से लेवल 1 या लेवल 1 से लेवल 2 तक नहीं जा सकता।

अगर कोई मेरी मदद कर सकता है तो यह बहुत अच्छा होगा।