react router始终获取不到正确路由参数
仿照官方文档写的一串代码,但是就在路由传参上始终没法解析字符串中的${item}变量,总是按照字符串去解析,导致无法得到想要的正确参数,是怎么回事?
代码如下:
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}) => (
<p>Detail,url参数:{match.params.id}</p>
)
const Home = () => (
<div>
<p>Home</p>
<Link to='/list'>to List</Link>
</div>
)
export default RouterMap;
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
ES6的模板字符串的反引号