使用React Router根据React中的JSON返回值路由到特定视图

{
  "routes": [
    {
      "path": "/home",
      "component": "Home"
    },
    {
      "path": "/about",
      "component": "About"
    },
    {
      "path": "/contact",
      "component": "Contact"
    }
  ]
}

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

const json = {
  "routes": [
    {
      "path": "/home",
      "component": "Home"
    },
    {
      "path": "/about",
      "component": "About"
    },
    {
      "path": "/contact",
      "component": "Contact"
    }
  ]
};

const App = () => {
  return (
    <BrowserRouter>
      {json.routes.map(route => (
        <Route
          key={route.path}
          path={route.path}
          component={route.component}
        />
      ))}
    </BrowserRouter>
  );
};

export default App;