React - エラーを返すコンポーネントをマッピングする

Question

多くのページでビルドしたいアプリがあります。これを行うには、すべてのページの名前とパスを別々のファイルに入れて、 1つはレンダリングのコンポーネントの長いリストを持っていることに反対します。私の唯一の問題は、私は、マップ機能を使用しようとすると、それは私が持っている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" 
}] 

を言って、エラーを返すことですまた<Route component={subject.name} path={subject.path}>を返してみましたが、Warning: Failed prop type: Invalid prop component of type string supplied to Route, expected function.のような警告が返されますeを個別に行う必要はありませんか？それとも私が行方不明になっている他の良い方法がありますか？あなたのsubject.nameが（エラーで指摘されたように）文字列であるため、

Answer 1

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

は動作しません。実際のコンポーネントを動作させるためには、その名前ではなく実際のコンポーネントを指すようにルートオブジェクトが必要です。

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" 
}] 

は、あなたがコンポーネントにデータをマッピングすることができるルータに反応するroute configsをチェックしてください。