javascript - React Router 不匹配嵌套路由

Question

我在使用 React Router 时遇到了一个小问题。我有以下路由配置:

ReactDOM.render(
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={ProjectManagerApp}>
                <IndexRoute component={MainDashboard} />
                <Route path='/projects/:id' component={ProjectView}>
                    <IndexRoute component={ProjectPanel} />
                    <Route path='/todos' component={ProjectTodos} />                    
                </Route>                
                <Route path='*' component={NotFound} />            
            </Route>
        </Router>
    </Provider>
    ,
    document.getElementById('app')
);

问题出在“ProjectView”内嵌套的路由。 IndexRoute 正在工作，因此，例如，当我访问“http://localhost:3000/projects/38d38234-5bdb-474a-8db8-6206cefe3e87 ”时，将呈现项目面板组件。但是当我访问“http://localhost:3000/projects/38d38234-5bdb-474a-8db8-6206cefe3e87/todos”时，它落在NotFound路线上。所有其他路线都工作正常。我正在使用 React Router 3。有人可以帮助我吗？

谢谢

Answer 1

您用尾随/指定的所有路由都将相对于根目录，因此

<Route path='/todos' component={ProjectTodos} />

可以通过http://localhost:8080/todos事件访问，但它是一个嵌套路由

要按您想要的方式访问，请删除尾随的 /。指定您的路线，例如

ReactDOM.render(
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={ProjectManagerApp}>
                <IndexRoute component={MainDashboard} />
                <Route path='projects/:id/' component={ProjectView}>
                    <IndexRoute component={ProjectPanel} />
                    <Route path='todos' component={ProjectTodos} />                    
                </Route>                
                <Route path='*' component={NotFound} />            
            </Route>
        </Router>
    </Provider>
    ,
    document.getElementById('app')
);