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

Posted 2021-04-16

我是React的新手，我创建了一个简单的反应应用程序。我目前正在实施react-router。我只是想问一下这有什么区别

<Route path="/projects/add" component={Addproject} />

对此

<Route path="/projects/:id" component={Projectitem} />

我似乎无法得到它。当我点击它说的链接时

TypeError：无法读取undefined的属性'params'

并且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>

我一直在读书，我读到了一些关于比赛的内容。有人可以教我如何使用它。提前致谢。

答案

看来我对这台路由器的工作原理有了一些了解。我读过这个

/projects/add 

和

/projects/:id

是相同的道路。一个快速的解决方案是

/projects/list/:id

和

/projects/add

但我不想这样做。我想学习一个更好的方法，而不是自定义我的链接。感谢任何愿意回答的人。对不起，我是一个noobie。 :(

另一答案

尝试在Projectitem组件中使用你的params：const { params } = this.props.match然后你就可以使用你的id var：<p>Project ID: {params.id}</p>。