React router v4 - 在同一路由上渲染两个组件答案

【问题标题】：React router v4 - Rendering two components on same routeReact router v4 - 在同一路由上渲染两个组件
【发布时间】：2019-04-12 07:23:59
【问题描述】：

我有这些路线

 <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。

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

【问题讨论】：

尝试交换 <Route /> 标签（先放 /create），如果有任何改变，请告诉我
感谢@FrankerZ 的回复。我试过了，没有任何区别。我尝试使 url 的长度不同，因此创建看起来像 /admin/cater/create/cater。然后我没有任何问题，但这不是我想要构建我的 URL 的方式

标签： javascript reactjs react-redux react-router react-router-v4

【解决方案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 /> 元素。

【讨论】：

@David react-router 在后台使用path-to-regexp。他们在文档中做了一些解释。
@FrankerZ 谢谢！这为我修好了。也不知道 (\\d+)。

【解决方案2】：

问题在于 :id 与 create 匹配（因此，它认为“查看带有 id create 的服务”）。解决这个问题的方法是将通配符匹配路由放在最后，并将所有<Routes/> 包裹在<Switch/> 中，因此它只呈现第一个命中。

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

【讨论】：