javascript - 使用 React Router 为数组中的项目分配路由

Question

我是 JavaScript、React 和路由器的新手。虽然我熟悉基本路由，但下面的示例有点复杂。我无法在 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);

标签： javascriptreactjsreact-router