Question

我有这些路线

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

当我导航到第一条路线时，将获得具有给定ID的服务。并且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)

CreateCater：

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 />元素。

Answer 2

问题在于:id与create匹配（因此，它认为“请参见ID为create的餐饮者”）。解决此问题的方法是将通配符匹配路由放在最后，并用<Routes/>包装所有<Switch/>，因此它仅呈现第一个匹配。

如果还有其他问题，请查看文档：{{3}}

React Router v4-在同一路径上渲染两个组件

2 个答案: