javascript - this.props.match.params 授权后传递给子组件

Question

我最近开始在 React 上构建一个大项目，还使用具有身份验证功能的 Firebase，但我不太理解 React-router-dom 链接和 React 组件之间的关系。

我正在努力争取

this.props.match.params // which is going to be 2018 / 2019 / 2020... etc

在组件中，它呈现为动态路由(如唯一的帖子组件)。

我尝试仅使用一个简单的类组件，这可以工作，但问题是，如果没有身份验证，每个人都可以访问此管理路由，并且每个人都可以编辑和删除那里的数据。我希望它只能由经过身份验证的用户访问。 (管理员)

这就是我的代码的样子:

主要组件:(链接所在的位置)

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

class SeasonBox extends Component {
    render() {
        return (
            <Link className='seasonbox' to={`/adminseason/${this.props.season}`}>
                <p className='seasonbox__season'>{this.props.season}/{this.props.season+1}</p>
            </Link>
        )
    }
}

export default SeasonBox;

点击链接后渲染的组件:

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { compose } from 'recompose'
import { withAuthorisation } from '../Session'
import { withFirebase } from '../Firebase'


const AdminMatchesBox = ({authUser}) => (
    <div>{authUser ? <AdminMatchesBoxAuth /> : <AdminMatchesBoxNonAuth />} </div>
)

class AdminMatchesBoxAuth extends Component {
    render() {
        return (
            <div>
                Hey I am the season {this.props.match.params}!

                <Link to={'/adminmatches'}>Wróć</Link>
            </div>
        )
    }
}

const AdminMatchesBoxNonAuth = () => (
    <div>
        <h1>You do not have permission to visit this page.</h1>
    </div>
)

const mapStateToProps = state => ({
    authUser: state.sessionState.authUser
});

const condition = authUser => !!authUser


export default compose(withAuthorisation(condition), connect(mapStateToProps),withFirebase)(AdminMatchesBox);

因此，如果我不使用授权，并且仅使用单个类组件，我可以获得 this.props.match.params -> 这是网站的 id，我需要它来访问数据库中的数据。

但是，我希望未登录的用户看不到它，并且我必须通过授权过程来处理它。

我收到错误

Cannot read property 'params' of undefined.

我不知道如何将 match.params 传递到 AdminMatchesBoxAuth 组件中。

谁能给点建议吗？

Answer 1

通过使用 Router 包装，您可以访问参数

试试这个

import { withRouter } from "react-router";
    import React, { Component } from 'react'
    import { Link } from 'react-router-dom'
    import { connect } from 'react-redux'
    import { compose } from 'recompose'
    import { withAuthorisation } from '../Session'
    import { withFirebase } from '../Firebase'


    const AdminMatchesBox = ({authUser}) => (
        <div>{authUser ? <AdminMatchesBoxAuth /> : <AdminMatchesBoxNonAuth />} </div>
    )

    class AdminMatchesBoxAuth extends Component {
        constructor (props){
          super(props)
         }
        render() {
            return (
                <div>
                    Hey I am the season {this.props.match.params}!

                    <Link to={'/adminmatches'}>Wróć</Link>
                </div>
            )
        }
    }

    const AdminMatchesBoxNonAuth = () => (
        <div>
            <h1>You do not have permission to visit this page.</h1>
        </div>
    )

    const mapStateToProps = state => ({
        authUser: state.sessionState.authUser
    });

    const condition = authUser => !!authUser


    export default compose(withRouter, withAuthorisation(condition), connect(mapStateToProps),withFirebase)(AdminMatchesBox)