javascript - React-router - 子路由未显示

Question

我正在尝试实现react-router，但缺少一些东西。我无法浏览到

domain.com/projects/-KBnGTGY0WZQSZIa7nRc

我希望它是具有projectId的项目的子域

这是我的路线设置

<Router history={new HashHistory}>
    <Route path="/" component={Main}>
        <Route path="profile" component={Profile}   onEnter={requireAuth}  />
        <Route path="projects" component={Projects} >
           <Route path="/projects/:projectId" component={ProjectsDetails} />
        </Route >
        <Route path="login" component={Login} />
        <Route path="logout" component={Logout} />
        <Route path="register" component={Register} />
        <Route path="*" component={Register}/>
    </Route>
</Router>

我也链接到这样的子路线

<Link to={`/projects/${this.props.item.key}`}>
    <h3 className="project-list-h3">{this.state.text} </h3>
</Link>

它只是恢复到*，即注册页面。

我需要在 {ProjectsDetails} 页面添加一些内容吗？它甚至没有调用它，所以我相信问题出在其他地方。

谢谢

Answer 1

在上面提供的示例中，您的路线为/projects/projects/:id。如果您希望使用像 path="/projects/:projectId"这样的路由，则不会将其嵌套在项目路由中。我提供了一个官方文档的链接，该文档概述了这个概念。 Official docs routes .

如果您查看了示例，它显示了与您的类似的嵌套路由，请注意，您组合了父级和子级的路径来获取子级路由的路径。

<Router>
  <Route path="/" component={App}>
  <Route path="about" component={About} />
  <Route path="inbox" component={Inbox}>
    <Route path="messages/:id" component={Message} />
  </Route>
</Route>

/inbox/messages/:id 应用程序 -> 收件箱 -> 消息