Присвоение маршрутов элементам в массиве с использованием React Router

Question

Я новичок в JavaScript, React и Router.Хотя я знаком с базовой маршрутизацией, приведенный ниже пример немного сложнее.Мне не удалось найти какие-либо примеры в стеке, которые бы касались этого, и я застрял.

Я в основном пытаюсь назначить маршруты для элементов в массиве, к которым можно получить доступ в элементе, где они отображаются,Таким образом, когда на упомянутые предметы нажимают, они направляются к желаемому пути.Я знаю, что могу сделать это, если разбью массив, но это может испортить стилизацию {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);