React - Mapping out Components Fehler zurückgegeben

Question

Es gibt eine App, die ich mit vielen Seiten erstellen möchte, ich dachte, der beste Weg, dies zu tun wäre, alle Seiten Name und Pfad in eine separate Datei zu setzen und dann jeweils aus eine als eine lange Liste von Komponenten in Render entgegen zu setzen. Mein einziges Problem ist, dass wenn ich versuche, die Karte zu benutzen, es gibt eine Fehlermeldung, Uncaught SyntaxError: Unexpected token < in JSON at position 1

routes.js

import React from "react"; 
import { withRouter, Switch, BrowserRouter, Route, Redirect, Link } from "react-router-dom"; 

import Login from "../ui/authentication/Login"; 
import Signup from "../ui/authentication/Signup"; 
import Home from "../ui/Home"; 
import { SubjectRoutes } from "../ui/subjectRoutes/subjectRoutes"; 
import Math from "../ui/subjectRoutes/routes/math" 
import Science from "../ui/subjectRoutes/routes/science" 
import NotFound from "../ui/NotFound"; 

export default class Routes extends React.Component{ 
    renderSubjectRoutes(subjects){ 
    console.log(SubjectRoutes) 
    return subjects.map((subject) => { 
     return <{subject.name} path={subject.path} /> 
    }) 
    } 
    render(){ 
    return (
     <div> 
     <BrowserRouter> 
      <Switch> 
      <Login path="/login" /> 
      <Signup path="/signup" /> 
      <Home path="/home"/> 
      {this.renderSubjectRoutes(SubjectRoutes)} 
      <NotFound /> 
      </Switch> 
     </BrowserRouter> 
     </div> 
    ) 
    } 
} 

subjectRoutes.js

export const SubjectRoutes = [{ 
    name: "Science", 
    path: "/science" 
},{ 
    name:"Math", 
    path:"/math" 
}] 

Ich habe auch versucht, <Route component={subject.name} path={subject.path}> zurückgeben, aber es gibt eine Warnung wie Warning: Failed prop type: Invalid prop component of type string supplied to Route, expected function. Würdest du mögliche Lösungen kennen jeden Router zuordnen e ohne jeden einzeln zu machen? Oder gibt es einen anderen besseren Weg, den ich vermisse?

Answer 1

<Route component={subject.name} path={subject.path}> 

funktioniert nicht, weil Ihre subject.name ein String ist (wie in den Fehler hingewiesen). Sie müssen Ihr Routenobjekt auf die tatsächlichen Komponenten und nicht auf seinen Namen zeigen, damit es funktioniert.

subjectRoutes.js

import Math from "../ui/subjectRoutes/routes/math" 
import Science from "../ui/subjectRoutes/routes/science" 

export const SubjectRoutes = [{ 
    name: Science, 
    path: "/science" 
},{ 
    name:Math, 
    path:"/math" 
}] 

prüfen route configs von Router aus Reagieren, wo Sie Daten zu Komponenten abbilden können.