route zu nicht-komponent klasse

[nikva]

Hallo,
Ich habe eine funtion für eine React App implementiert und sie getestet, indem ich sie als App mit

import App from './App';

importiert habe. Jetzt will ich sie aber in eine eigene Klasse verschieben aber kriege es nicht hin zu dieser function zu routen.

      <Route exact path="/play_quiz" component={Play_quiz}></Route>

funktioniert ja nicht, da es bei mir keine component ist.
Soll ich das jetzt als component umschreiben oder gibt es da eine Möglichkeit die route anders zu implementieren?

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Route, BrowserRouter } from 'react-router-dom';
import QuestionOverview from './components/question_overview';
import CreateQuiz from './components/create_quiz';
import Play_quiz from './components/play_quiz';

const routes = (
  <BrowserRouter>
    <div id='rout-div'>
      <Route exact path="/" component={App}></Route>
      <Route exact path="/create_quiz" component={CreateQuiz}></Route>
      <Route exact path="/question_overview" component={QuestionOverview}></Route>
      <Route path="/play_quiz" render={() => <Play_quiz />} />
    </div>
  </BrowserRouter>
)

ReactDOM.render(
  routes,
  document.getElementById('root')
);
reportWebVitals();

[CODE lang="javascript" title="funtion für eine basisstruktur eines quizes"]import React, { useState } from 'react';
import './play_quiz.css';

export default function Play_quiz() {
const questionSet = [
{
questionText: 'Testfrage1',
answerOptions: [
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'korrekte Antwort', isCorrect: true },
{ answerText: 'falsche Antwort', isCorrect: false },
],
},
{
questionText: 'Testfrage2',
answerOptions: [
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'korrekte Antwort', isCorrect: true },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
],
},
{
questionText: 'Testfrage3',
answerOptions: [
{ answerText: 'korrekte Antwort', isCorrect: true },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
],
},
{
questionText: 'Testfrage4',
answerOptions: [
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'korrekte Antwort', isCorrect: true },
],
},
];

const [currentQuestion, setCurrentQuestion] = useState(0);
const [showScore, setShowScore] = useState(false);
const [score, setScore] = useState(0);

const answerQuestionClick = (isCorrect) => {
if (isCorrect) {
setScore(score + 1);
}

const nextQuestion = currentQuestion + 1;
if (nextQuestion < questionSet.length) {
setCurrentQuestion(nextQuestion);
} else {
setShowScore(true);
}
};
return (
<div className='quiz-window'>
{showScore ? (
<div className='score-section'>
korrekt beantwortet: {score} von {questionSet.length}
</div>
) : (
<>
<div className='question-section'>
<div className='question-count'>
<span>Frage {currentQuestion + 1}</span>/{questionSet.length}
</div>
<div className='question-text'>{questionSet[currentQuestion].questionText}</div>
</div>
<div className='answer-section'>
{questionSet[currentQuestion].answerOptions.map((answerOption) => (
<button onClick={() => answerQuestionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
))}
</div>
</>
)}
</div>
);
}
[/CODE]

 

[mrBrown]

da es bei mir keine component ist.

Doch, ist es, eine functional component.

Was für einen Fehler gibts denn?

 

[nikva]

Ich hatte vorher den Fehler, dass Play_quiz "undefined" war, was ich darauf geschlossen habe, dass ich die klasse ja nicht als ...class extends React.Component implementiert habe.
Es funktioniert jetzt aber plötzlich doch mit:

import Play_quiz from './components/play_quiz';
import App from './App';

const routes = (
  <BrowserRouter>
    <div id='rout-div'>
      <Route exact path="/play_quiz" component={Play_quiz}></Route>
      <Route exact path="/" component={App}></Route>
      <Route exact path="/question_overview" component={QuestionOverview}></Route>
      <Route exact path="/login" component={Login}></Route>
    </div>
  </BrowserRouter>

Ich bin mir sicher, dass ich es zuvor auch so versucht habe, aber vll werde ich auch verrückt 🙄