It's the first time I'm using react-router and I'm having a hard time doing it.

Here's my code:

App.tsx

import React from 'react';
import logo from './logo.svg';
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
import DraggableGame from './PointAndClickGame';
import PointAndClickGame from './PointAndClickGame';
import './css/App.css';

function App() {
  return (
    <div className="App">
      <Router>
        <Route exact path='/'>
         <Link to="/pointAndClick">joc pointAndClick</Link><br/>
         <Link to="/draggable">joc draggable</Link>
        </Route>
        <Route exact path="/pointAndClick">
          <PointAndClickGame/>
        </Route>
        <Route exact path="/draggable">
          <DraggableGame/>
        </Route>
      </Router>   
    </div>
  );
}

export default App;

DraggableGame.tsx

import React, { useRef, useState, useEffect } from 'react';
import { Row, Col } from 'react-bootstrap';
import Box from './Box';
import ButtonCustom from './Button';

function DraggableGame() {
    const correctResponse: string = "A";
    const [selectedResponse, setResponse] = useState<string|null>(null);

    const onSubmitAnswer = () => {
        class Coordinate {
            x: number;
            y: number;

            constructor(x: number, y: number) {
                this.x = x;
                this.y = y;
            }
        }

        let width: number = box0.current.getBoundingClientRect().width;
        let height: number = box0.current.getBoundingClientRect().height;

        let boxCoordinates: Array<Coordinate> = [];
        for(let i=0;i<4;i  )
        {
            let data = eval(`box${i 1}`);
            boxCoordinates.push(new Coordinate(data.current.getBoundingClientRect().x, data.current.getBoundingClientRect().y));
        }     
        
        if(Math.abs(boxCoordinates[0].x - box0.current.getBoundingClientRect().x) < (width / 1.75))
        {
            if(Math.abs(boxCoordinates[0].y - box0.current.getBoundingClientRect().y) < (height / 1.75))
            {
                setResponse("A");
            }            
        }
        else if(Math.abs(boxCoordinates[1].x - box0.current.getBoundingClientRect().x) < (width/1.75))
        {
            if(Math.abs(boxCoordinates[1].y - box0.current.getBoundingClientRect().y) < (height/1.75))
            {
                setResponse("B");
            }            
        }
        else if(Math.abs(boxCoordinates[2].x - box0.current.getBoundingClientRect().x) < (width /1.75))
        {
            if(Math.abs(boxCoordinates[2].y - box0.current.getBoundingClientRect().y) < (height /1.75))
            {                       
                setResponse("C");
            }            
        }
        else if(Math.abs(boxCoordinates[3].x - box0.current.getBoundingClientRect().x) < (width/1.75))
        {
            if(Math.abs(boxCoordinates[3].y - box0.current.getBoundingClientRect().y) < (height/1.75))
            {
                setResponse("D");
            }            
        }
    };

    const box0 = useRef<any>();
    const box1 = useRef<any>();
    const box2 = useRef<any>();
    const box3 = useRef<any>();
    const box4 = useRef<any>();   
    
    return (
        <div>
            <Box {...{ letter: correctResponse, draggable: 1 }} ref={box0} />
            <Row>
            <Col md>
            <Box {...{ letter: 'A', draggable: 0 }} ref={box1} />
            </Col>
            <Col md>
            <Box {...{ letter: 'B', draggable: 0 }} ref={box2} />
            </Col>
            <Col md>
            <Box {...{ letter: 'C', draggable: 0 }} ref={box3} />
            </Col>
            <Col md>
            <Box {...{ letter: 'D', draggable: 0 }} ref={box4} />
            </Col>
            </Row>
            <br/>
            { selectedResponse === correctResponse ? <ButtonCustom {...{onSubmitAnswer: onSubmitAnswer, resolvedQuestion: 1}}/> : <ButtonCustom {...{onSubmitAnswer: onSubmitAnswer, resolvedQuestion: 0}}/> }
        </div>
    );
}

export default DraggableGame;

PointAndClickGame.tsx

import React, { useState, SyntheticEvent } from 'react';
import { Row, Col } from 'react-bootstrap'
import Box from './Box';
import ButtonCustom from './Button';


function PointAndClickGame() {
    const correctResponse: string = "C";
    const [selectedResponse, setResponse] = useState<string|null>(null);

    const onSelectAnswer = (event: SyntheticEvent<HTMLDivElement, Event>) => {
        setResponse(event.currentTarget.textContent);           
    };

    return (
        <div>
            <Box letter={correctResponse} onSelectFunction={onSelectAnswer} />
            <Row>
            <Col md>
            <Box letter="A" onSelectFunction={onSelectAnswer} />
            </Col>
            <Col md>
            <Box letter="B" onSelectFunction={onSelectAnswer} />
            </Col>
            <Col md>
            <Box letter="C" onSelectFunction={onSelectAnswer} />
            </Col>
            <Col md>
            <Box letter="D" onSelectFunction={onSelectAnswer} />
            </Col>
            </Row>
            <br/>
            { selectedResponse === correctResponse ? <ButtonCustom {...{resolvedQuestion: 1}}/> : <ButtonCustom {...{resolvedQuestion: 0}}/> }
        </div>
    );
}

export default PointAndClickGame;

The problem is that no matter what link I press from the App component, React always renders pointAndClick, and I don't understand why.

Why is this happening and how can I fix it?

CodePudding user response：

Simply, this is the wrong part

import DraggableGame from './PointAndClickGame';
import PointAndClickGame from './PointAndClickGame';

You are importing the same component. Because of exporting the component as a default you are importing it with any name and no error will be thrown to warn you