React Router v4 ConnectedRouter 未在嵌套路由上呈现

Question

第一级路由从 Layout.tsx 正确呈现，但在 ResourcesUI.tsx 上单击时未呈现（参见下面的代码）。

ResourceUI 组件有 2 个部分。左侧部分有链接，右侧部分有组件，当单击左侧的链接时，应相应地呈现右侧组件。

就像我上面说的，资源组件被正确路由但是资源组件内部在被点击时没有渲染。

index.tsx

ReactDOM.render(
    <Provider store={store} >
        <ConnectedRouter  history={history} >
            <Layout />
        </ConnectedRouter>
    </Provider>,
    document.getElementById("root")
);

Layout.tsx

import routes from "routes"

<div className="container-fluid">
    <div className="row">
         <div className="col-sm-3">
              <SidebarContainer />
          </div>
         <div className='col-sm-9'>
              <Route exact path="/" component={Welcome} />
              <Route exact path="/services/:id" component={ServiceDetailsContainer} />
              <Route exact path="/services/:id/resources" component={ResourceContainer} />
         </div>
    </div>
    <div id="modal-root">
        <ModalContainer />
    </div>
</div>

ResourceContainer.tsx

class ResourceContainer extends React.Component<any & RouteComponentProps<{}>>{
    render() {
        const service = this.props.services.find(x => this.props.match.params.id === x.Id.toString());
        return (
            <ResourcesUI service={service} resources={service.Resources} match={this.props.match}/>
        );
    }
}

function mapStateToProps(state: AppState) {
    return {
        services: state.services.serviceRecords
    }
}
export default connect(mapStateToProps, null)(ResourceContainer);

ResourcesUI.tsx

class ResourcesUI extends React.Component<any & RouteComponentProps<{}>> {

    render() {
        return (
            <section>    
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-sm-3">
                            <div className="panel panel-default">
                                <div className="panel-body">
                                    <ul>
                                        {
                                            this.props.resources.map(x => {
                                              // /services/:id/resources/:resourceId  
                                              const path = `${this.props.match.url}/${x.Id}`; 

                                                return (
                                                    <li key={x.Id}>
                                                        <NavLink to={path}>
                                                            {x.Name}
                                                        </NavLink>
                                                    </li>
                                                );
                                            })
                                        }
                                   </ul>
                                </div>
                            </div>
                        </div>

                        <div className="col-sm-9">
                            // THIS ROUTE IS NOT RENDERED WHEN LINK ABOVE IS CLICKED
                           // /services/:id/resources/:resourceId
                            <Route path={`${this.props.match.path}/:resourceId`} component={detailfoo} />
                        </div>
                    </div>
                </div>
            </section>
            );
    }
}

const detailfoo = () => (
    <section>
        <div className="panel panel-default">
            <div className="panel-body text-center">
                Hey yo!
            </div>
        </div>
        <div className="panel panel-default">
            <div className="panel-body">
                Hey yo!
            </div>
        </div>
    </section>
);

export default  ResourcesUI;

更新

我还必须在父 layout.tsx 中添加嵌套路由才能使其正常工作。如果有人有更好的解决方案，请告诉我。 :)

<Route exact path="/services/:id/resources" component={ResourceContainer} />
<Route exact path="/services/:id/resources/:resourceId" component= ResourceContainer} />

Answer 1

你应该用 withRouter 包装你的资源。这将允许路由器的非直接后代拥有导航道具。

export default withRouter(MyComponent)

https://reacttraining.com/react-router/web/api/withRouter