React - 映射组件返回错误

Question

有一个应用程序我想用很多页面构建，我认为最好的方法是将所有页面名称和路径放入一个单独的文件中，然后映射出每个页面，而不是拥有渲染中的一长串组件。我唯一的问题是，当我尝试使用 map 函数时，它 returns 显示 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}> 但它 returns 像 Warning: Failed prop type: Invalid prop component of type string supplied to Route, expected function. 这样的警告你知道任何可能的解决方案来绘制每条路线而不必单独执行每条路线吗？还是有其他更好的方法来做到这一点我想念的？

Answer 1

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

不起作用，因为您的 subject.name 是一个字符串（正如错误中指出的那样）。您需要路由对象指向实际组件而不是其名称才能使其工作。

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 的 React Router，您可以在其中将数据映射到组件。

React - 映射组件返回错误

React - Mapping out Components returning error

meteor

reactjs

react-router-dom