来自JSON对象的动态反应路由

Question

我是React的新手，正在尝试学习react-router。我可以使用map方法遍历JSON对象。但是我正在努力寻找一种基于每次迭代来显示组件的方法。就像显示名称一样，我想在该特定迭代中显示另一个对象数组。我试着看开关，但听不懂。请帮忙！

render() {
       return this.props.topic.map(t => (
            <ul>
                <li>
                    <Link to={`${t.name}`}>{t.name}</Link>
                </li>
            </ul>
            ));

        <Switch>
            <Route path="/:id" children={<Child />} />
        </Switch> 
         }

这是JSON对象

topics = [
    {
      name: 'React Router',
      id: 'react-router',
      description: 'Declarative, component based routing for React',
      resources: [
        {
          name: 'URL Parameters',
          id: 'url-parameters',
          description: "URL parameters are parameters whose values are set 
          dynamically in a page's URL. This allows a route to render the same 
          component while passing that component the dynamic portion of the 
          URL so it can change based off of it.",
          url: 'https://tylermcginnis.com/react-router-url-parameters/'
        },
        {
          name: 'Programmatically navigate',
          id: 'programmatically-navigate',
          description: "When building an app with React Router, eventually 
           you'll run into the question of navigating programmatically. The 
            goal of this post is to break down the correct approaches to 
           programmatically navigating with React Router.",
          url: 'https://tylermcginnis.com/react-router-programmatically- 
         navigate/'
        }
      ]
    },
    {
      name: 'React.js',
      id: 'reactjs',
      description: 'A JavaScript library for building user interfaces',
      resources: [
        {
          name: 'React Lifecycle Events',
          id: 'react-lifecycle',
          description: "React Lifecycle events allow you to tie into specific 
          phases of a component's life cycle",
           url: 'https://tylermcginnis.com/an-introduction-to-life-cycle- 
           events-in-react-js/'
        },
        {
          name: 'React AHA Moments',
          id: 'react-aha',
          description: "A collection of 'Aha' moments while learning React.",
          url: 'https://tylermcginnis.com/react-aha-moments/'
        }
      ]
    },
    {
      name: 'Functional Programming',
      id: 'functional-programming',
      description: 'In computer science, functional programming is a 
      programming paradigm—a style of building the structure and elements of 
       computer programs—that treats computation as the evaluation of 
      mathematical functions and avoids changing-state and mutable data.',
      resources: [
        {
          name: 'Imperative vs Declarative programming',
          id: 'imperative-declarative',
          description: 'A guide to understanding the difference between 
          Imperative and Declarative programming.',
          url: 'https://tylermcginnis.com/imperative-vs-declarative- 
         programming/'
        },
        {
          name: 'Building User Interfaces with Pure Functions and Function 
          Composition',
          id: 'fn-composition',
          description: 'A guide to building UI with pure functions and 
         function composition in React',
          url: 'https://tylermcginnis.com/building-user-interfaces-with-pure- 
        functions-and-function-composition-in-react-js/'
        }
      ]
    }
  ]