使用React Router将路由分配给数组中的项目

Question

我是JavaScript，React和Router的新手。虽然我熟悉基本路由，但以下示例更加复杂。我无法在Stack上找到任何具体的示例，我被困住了。

我基本上是在尝试将路由分配给数组中可以在呈现它们的元素内访问的数组中的项目。因此，当单击这些项目时，它们会路由到所需的路径。我知道如果我破坏了数组就可以这样做，但是这样做会弄乱{classes.taskList}的样式（未显示）。任何帮助将不胜感激！

import React, { Fragment } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { List } from '@material-ui/core/list';
import classNames from 'classnames';
import NavLink from 'react-router-dom/NavLink';
import Link from 'react-router-dom/Link';

const formList = [
    { label: 'Form 1'},
    { label: 'Form 2'},
    { label: 'Form 3'}];

{/* This is an example route. I want to assign the route the first item in formList
  <NavLink style={{ textDecoration: 'none' }} to = "/Form 1" exact activeStyle ={ { color:'green'}}> Form 1 </NavLink>,
  <Route path = "/Form 1" exact render = {()=>{
    return ( <Form 1/>);
    }
}/>
*/}

const renderRow = ({ getItemProps, item }) => (
    <div {...getItemProps({ item })}>
        {item.label} <span>{item.count}</span>
    </div>
);

const mySidebar = ({ classes }) => (

    <List
     source={formList}
     rowRenderer={renderRow}
     className={classes.taskList}
    />

);

export default withStyles(styles)(mySidebar);