React Router与嵌套路由不匹配-Java 学习之路

我在使用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 ", for example, the Project Panel component is rendered. But when I access " http://localhost:3000/projects/38d38234-5bdb-474a-8db8-6206cefe3e87/todos”时，它会落在NotFound路径上 . 每个其他路线都正常工作 . 我正在使用React Router 3.请问有人能帮帮我吗？

谢谢

1 回答

您使用 trailing / 指定的所有路由都将相对于root，因此

<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')
);

回复于 2024-04-27T17:47:55+08:00

React Router与嵌套路由不匹配

1 回答

相关问题