开发者问题收集

反应路由器显示错误的组件

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