How to pass data from one js file to another js file through app.js in reactjs?

I think you're asking about how to import.

export const myConst = 'A string or whatever'

import {myConst} from './first.js'

console.log(myConst)
// 'A string or whatever'

See the link for more information.

EDIT

After trying to decipher your problem, I think you might need to use useContext and a dispatcher. Context is like state that is available to all components within the context provider.

Another way of doing this would be to have state (or a ref) at the App level and pass this as props (as you correctly said) to both the quiz component and the joinQuiz component. Then inside the joinQuiz.js component you set the state to the data you want, before linking to the quiz route, then the data will be available inside the quiz page.

App.js

function App() {
  const [quizState, setQuizState] = useState(null)
  return (
    <div>
      <Router>
        <Header />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/creategame" exact component={createGame} />
          <Route path="/join" exact component={() => <JoinQuiz setState={setQuizState}/>} />
          <Route path="/quiz"  exact component={() => <Quiz state={quizState} />} />
        </Switch>
        <Footer/>
      </Router> 
    </div>
  );
}

joinQuiz.js (minimal)

import React from 'react';
import {useHistory} from 'react-router-dom';

const JoinQuiz = ({setState}) => {     // setState passed from App.js
  
  let history = useHistory();

  const handleSubmit = (quizData) => (event) => {
    event.preventDefault();
    setState(quizData)             // this is where you set the state you want to use in the other component
    // then navigate to the next page:
    history.push('/quiz')
  }
    
  return (
      <Table>
        ...
        <Button onClick={handleSubmit(quizData)}> Join </Button>
        ...
      </Table>
  );
};

export default JoinQuiz;

Quiz.js

const Quiz = ({state}) => {      // this is the quizState that gets set when you click the button.

  ... // your other logic and state etc.

  return ( 
    <Container style={{paddingTop:"80px"}}>      

      ... // the rest of your component

    </Container>
  )
}

Incidentally, you will want to use <td></td> inside your table body for the cells, rather than <th></th> which is for header cells.

EDIT 2

Here's a really simple example:

const App = () => {

  const [quizState, setQuizState] = useState(null)

  return (
      <div>
        <Route path={'/choose'} component={() => <JoinQuiz setQuizState={setQuizState}/>}/>
        <Route path={'/quiz'} component={() => <Quiz quizState={quizState}/>}/>
      </div>
  );
};

const JoinQuiz = ({setQuizState}) => {
  let history = useHistory();

  const handleButtonClick = (event) => {
    event.preventDefault()
    setQuizState({question: "What's the answer?", answer: '42'})
    history.push('/quiz')
  }

  return (
      <button onClick={handleButtonClick}>Join</button>
  );
};

const Quiz = ({quizState}) => {
  return (
      <div>
        {quizState.question}
        <input type="text" />
      </div>
  );
};

Then after clicking the button you should see something like this:

I don't think I can break it down for you any more than this! :)