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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了反应路由器显示错误的组件相关的知识,希望对你有一定的参考价值。

我是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>

以上是关于反应路由器显示错误的组件的主要内容,如果未能解决你的问题,请参考以下文章

如何在使用react-router路由的组件中集成错误边界

嵌套反应路由器组件不会在页面重新加载时加载/渲染?

反应路由器组件中出现意外的令牌<错误

带有可加载组件错误的反应路由器

一秒钟后反应组件在heroku上消失

在浏览器的后退按钮上反应路由器历史记录