# route zu nicht-komponent klasse



## nikva (18. Dez 2020)

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 (18. Dez 2020)

nikva hat gesagt.:


> da es bei mir keine component ist.


Doch, ist es, eine functional component.

Was für einen Fehler gibts denn?


----------



## nikva (18. Dez 2020)

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


----------

