React router v4 - 在同一路由上渲染两个组件 [英] React router v4 - Rendering two components on same route

问题描述

我有这些路线

 <路由精确路径={`/admin/caters/:id`} component={Cater}/><路由精确路径={'/admin/caters/create'} component={CreateCater}/>

当我导航到第一条路线时，我得到了一个带有给定 ID 的餐饮.并渲染了 Cater 组件

当我导航到第二个路由时，页面上呈现了 CreateCater 组件，但我注意到正在运行 Cater 组件中使用的一些 redux 操作.所以这两个组件都以某种方式被渲染 - 但我不知道为什么.

以下是组件:

餐饮:

class Cater extends Component {异步 componentDidMount() {console.log('Cater 组件确实挂载了')const { match: { params: { id }}} = this.propsthis.props.get(id)}使成为() {const { cat } = this.props如果(！迎合){返回空值}别的 {返回 (<div>... 组件数据 ...

)}}}const mapStateToProps = (state, props) =>{const { match: { params: { id }}} = props返回 {迎合:caterSelectors.get(state, id)}}const mapDispatchToProps = (dispatch, props) =>{返回 {得到:(id)=>调度(caterActions.get(id))}}导出默认连接(mapStateToProps，mapDispatchToProps)(Cater)

创建Cater:

导出默认类 CreateCaterPage extends Component {使成为() {返回 (<React.Fragment><面包屑/><CaterForm/></React.Fragment>)}}

当我转到/admin/caters/create' 时，我可以在 Cater 组件内的 componenDidMount() 生命周期方法中看到 console.log.

我不知道我做错了什么:(

解决方案

/create 匹配 /:id，所以这条路由匹配是有意义的.我建议强制 :id 只查找数字:

<路由精确路径={`/admin/caters/:id(\\d+)`} component={Cater}/><路由精确路径={'/admin/caters/create'} component={CreateCater}/>

同样，你可以按照@jabsatz 的建议，使用一个开关，让它匹配第一个匹配的路由.在这种情况下，您需要确保 /admin/caters/create 路由是第一个匹配的 元素.

I have these routes

 <Route exact path={`/admin/caters/:id`} component={Cater} />
 <Route exact path={'/admin/caters/create'} component={CreateCater} />

When I navigate to the first route I get a cater with a given ID. And the Cater component is rendered

When I navigate to the second route, the CreateCater component is rendered on the page, but I noticed that some redux actions that are used in the Cater component are being run. So both component are somehow being rendered - but I can't figure out why.

Here are the components:

Cater:

class Cater extends Component {

  async componentDidMount() {
        console.log('Cater component did mount')
        const { match: { params: { id }}} = this.props
        this.props.get(id)
    }

    render() {
        const { cater } = this.props
        if(!cater) {
            return null
        }
        else {
            return (
                <div>
                   ... component data ...
                </div>
            )
        }
    }
}

const mapStateToProps = (state, props) => {
    const { match: { params: { id }}} = props
    return {
        cater: caterSelectors.get(state, id)
    }
}

const mapDispatchToProps = (dispatch, props) => {
    return {
        get: (id) => dispatch(caterActions.get(id))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cater)

CreateCater:

export default class CreateCaterPage extends Component {
    render() {
        return (
            <React.Fragment>
                <Breadcrumbs />
                <CaterForm />
            </React.Fragment>
        )
    }
}

When I go to /admin/caters/create' I can see the console.log in the componenDidMount() lifecycle method inside the Cater component.

I cant figure out what I am doing wrong :(

解决方案

/create matches /:id, so it makes sense that this route matches. I recommend forcing :id to look for numeric only:

<Route exact path={`/admin/caters/:id(\\d+)`} component={Cater} />
<Route exact path={'/admin/caters/create'} component={CreateCater} />

Likewise, you can follow @jabsatz's recommendation, use a switch, and have it match the first route that matches. In this case, you would need to ensure that the /admin/caters/create route is the first <Route /> element matched.

这篇关于React router v4 - 在同一路由上渲染两个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！