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

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)

创建卡特尔：

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

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

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

Answer 1

问题是 :id 与 create 匹配（因此，它认为 "see cater with id create"）。解决方法是把通配符匹配路由放在最后，把所有的<Routes/>都用<Switch/>包起来，这样就只渲染第一个hit。

如果您还有其他问题，请查看文档：https://reacttraining.com/react-router/core/api/Switch

Answer 2

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

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

React router v4 - Rendering two components on same route

javascript

reactjs

react-router

react-redux

react-router-v4