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。 如果希望使用路径=“ / projects /：projectId”之类的路由，则不要将其嵌套在项目路由中。 我提供了到官方文档的链接，该链接提供了有关此概念的概述。 官方文档路线 。

如果您看一下示例，该示例显示了与您的示例相似的嵌套路由，请注意，您将父级和子级的路径合并以获得子级路径。

<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应用->收件箱->消息