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