Question

我有一个关于React中路由的问题。当我尝试仅在一个组件中创建简单的嵌套路由时，它就会起作用。但是，当我的一条路线显示的组件正在渲染其他2条嵌套路线时，则不会。这是代码的一部分：

function MyComponent (props) {
    return <div>{props.children}</div>
}

class Test extends React.Component {
    render () {
        return <Route key="route1.4" className="fullHeight fullWidth"  path="" component={MyComponent}>
            <Route key="route1.5" className="fullHeight fullWidth"  path="/test" component={DatePickerContainer} />
        </Route>
    }
}

class AppComponent extends React.Component {
    render() {
        if(!this.props.routing)
            return <div> Initializing App... </div>
        return <div className="fullHeight fullWidth">
            <Router className="fullHeight fullWidth" currentRoute={this.props.routing}>
                <Route className="fullHeight fullWidth" path={routes.ROOT_PATH} component={MainLayout} >
                    <Route key="route1.1" className="fullHeight fullWidth"  path={routes.WORLD_RELATIVE_PATH} component={world.component} />
                    <Route key="route1.2" className="fullHeight fullWidth"  path={routes.CLOCK_RELATIVE_PATH} component={ClockContainer} />
                    <Route key="route1.3" className="fullHeight fullWidth"  path={routes.DATE_PICKER_RELATIVE_PATH} component={Test} />
                </Route>
            </Router>
        </div>
    }
}

当我转到正确的路径时，将显示测试。 MyComponent和props.children也可以工作，因为如果我放置任何其他组件而不是route1.5，则会显示该组件。但是当我去

routes.DATE_PICKER_RELATIVE_PATH / test

然后，不显示DatePickerComponent。

这是带有简单嵌套路由的代码，它们完美地起作用：

function MyComponent (props) {
    return <div>{props.children}</div>
}

class AppComponent extends React.Component {
    render() {
        if(!this.props.routing)
            return <div> Initializing App... </div>
        return <div className="fullHeight fullWidth">
            <Router className="fullHeight fullWidth" currentRoute={this.props.routing}>
                <Route className="fullHeight fullWidth" path={routes.ROOT_PATH} component={MainLayout} >
                    <Route key="route1.1" className="fullHeight fullWidth"  path={routes.WORLD_RELATIVE_PATH} component={world.component} />
                    <Route key="route1.2" className="fullHeight fullWidth"  path={routes.CLOCK_RELATIVE_PATH} component={ClockContainer} />
                    <Route key="route1.3" className="fullHeight fullWidth"  path={routes.DATE_PICKER_RELATIVE_PATH} component={MyComponent}>
                        <Route key="route1.4" className="fullHeight fullWidth"  path="/test" component={DatePickerContainer} />
                    </Route>
                </Route>
            </Router>
        </div>
    }
}

您对第一个代码为何不起作用有任何想法吗？

带有组件的嵌套路线呈现了另一条路线

0 个答案: