Question

从 Layout.tsx 可以正确呈现第一级路线，但是在单击 ResourcesUI.tsx 时，不会呈现（请参见下面的代码）。

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

就像我上面说的那样，资源组件被正确路由，但是单击时资源组件内部没有呈现。

index.tsx

<fo:external-graphic width="auto" content-width="164pt" height="auto" src="url(/resources/img/main-logo.png)"/>

Layout.tsx

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

ResourceContainer.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>

ResourcesUI.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);

更新

我还必须在父layout.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;

Answer 1

您应该使用withRouter包装资源comp。这将允许您的非直接后代拥有导航道具。

export default withRouter(MyComponent)

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

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

1 个答案: