Question

我最近开始也使用带有身份验证的Firebase在React上构建一个大型项目，我不太了解react-router-dom链接与React组件之间的关系。

我在努力争取

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

在组件中，它呈现为动态路线（如唯一的post组件）。

我试图只使用一个简单的类组件，但这可行，但是问题是，没有身份验证，每个人都可以访问此管理路由，并且每个人都可以在其中编辑和删除数据。我希望只有经过身份验证的用户才能访问它。（管理员）

这就是我的代码的样子：

主要组件：（链接所在的位置）

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)

授权后，this.props.match.params传递到子组件中

1 个答案: