javascript - React router v4 - 在同一条路线上渲染两个组件

Question

我有这些路线

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

当我导航到第一条路线时，我得到了一个具有给定 ID 的 cater。并渲染了 Cater 组件

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

组件如下:

迎合:

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)

创建卡特尔:

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

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

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

Answer 1

/create火柴/:id ，所以这条路线匹配是有道理的。我建议强制 :id仅查找数字:

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

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