imitates a string of code written in the official document, but the ${item} variable in the string can never be parsed on the routing parameter. It is always parsed according to the string, so that you can"t get the correct parameters you want. What"s going on? The
code is as follows:
import React from "react"
import { Route, Link } from "react-router-dom"
// import Detail from "./containers/Detail.jsx";
// import Home from "./containers/Home.jsx";
// import List from "./containers/List.jsx";
class RouterMap extends React.Component
{
render()
{
return (
<div>
<Route exact path="/" component={Home}/>
<Route path="/list" component={List}/>
<Route path="/detail/:id" component={Detail}/>
</div>
)
}
}
const arr = [1,2,3];
const List = () => (
<ul>
{
arr.map(function(item, index)
{
return (
<li key={index}>
<Link to={"/detail/${item}"}>to detail {item}</Link> {/**/}
</li>
);
}.bind(this))
}
</ul>
);
const Detail = ({match}) => (
Detailurl:{match.params.id}
)
const Home = () => (
<div>
Home
<Link to="/list">to List</Link>
</div>
)
export default RouterMap;