反应路由器显示错误的组件
2018-03-04
486
我是 React 新手,我正在创建一个简单的 React 应用。我目前实现了 react-router。我只想问一下这个
<Route path="/projects/add" component={Addproject} />
和这个
<Route path="/projects/:id" component={Projectitem} />
有什么区别。当我点击链接时,它显示
TypeError: Cannot read property 'params' of undefined
并且 AddProject 组件不会显示。尽管我点击了 AddProject 链接,但它似乎还是将我带到了 ProjectItem 组件。我哪里做错了?
这是我的路由器代码。
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top lead">
<div className="container">
<div className="navbar-brand pull-left">
<ul className="navbar-nav">
<li className="active"><Link className="navbar-brand" to="/">Home Page</Link></li>
</ul>
</div>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<Link className="nav-link" to="/">
<i className="fa fa-fw fa-home"></i> Home
<span className="sr-only">(current)</span>
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/projects">
<i className="fa fa-fw fa-briefcase"></i> Projects
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/page1/Jason">Page 1</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/page2">Page 2</Link>
</li>
</ul>
</div>
</div>
</nav>
<Switch>
<Home>
<Route exact path="/" component={User} />
<Route exact path="/projects" component={Project} />
<Route path="/projects/add" component={Addproject} />
<Route path="/projects/:id" component={Projectitem} />
<Route path="/page1/:name" component={Page1} />
<Route path="/page2" component={Page2} />
</Home>
</Switch>
</div>
</Router>
我一直在阅读,我读到了一些关于 match 的内容。有人可以教我如何使用它吗?提前谢谢。
2个回答
看来我对这个路由器的工作原理有了一点了解。我读到
/projects/add
和
/projects/:id
是相同的路径。一个快速的解决方案是
/projects/list/:id
和
/projects/add
但我不想这样做。我想学习一种更好的方法,而不是自定义我的链接。感谢任何愿意回答的人。对不起,我是个菜鸟。:(
Sonson Ixon
2018-03-04
尝试在 Projectitem 组件中使用您的参数,如下所示:
const { params } = this.props.match
然后您可以像这样使用您的 id 变量:
<p>项目 ID:
{params.id}</p>
。
baeyun
2018-03-04