无法访问 url 参数，使用 react-router 4 传递答案

【问题标题】：Can't access url params, passed using react-router 4无法访问 url 参数，使用 react-router 4 传递
【发布时间】：2018-08-03 03:10:09
【问题描述】：

我在从 Reader.js 组件访问名为 bookId 的参数时遇到问题。使用 react-router 从 BookCarouselItem.js 传递参数。 Reader.js 是一个连接组件。

我不确定这是否会有所不同，但是 react-router 是否可以与 redux 连接的组件一起使用？还是我需要使用connected-react-router 之类的东西？

我曾尝试参考类似的问题，但无法找到解决方案，我们将不胜感激。

App.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { routes } from 'constants/index';
import Reader from 'components/reader/Reader'


Class App extends Component {
      render() {
        return (
            <div className='container-fluid main-container'>
                <Router>
                    <div>
                        <Route
                            path={'/reader/:bookId'}
                            component={() => <Reader />}
                        />
                    </div>    
                </Router>
            </div>
        );
      }
    }

export default App;

BookCarouselItem.js

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

export class BookCarouselItem extends React.Component {
    render() {
        const { bookThumbnail } = this.props;
        const { name, numberOfSections } = bookThumbnail;
        const bookId = 0;

        return (
            <Link className='book-carousel-link' to={`/reader/${bookId}`}>
                    <div className='book-info-overlay'>
                        <h5>{name}</h5>
                        <span>{numberOfSections} Sections</span>
                    </div>
            </Link>
        );
    }
}

export default BookCarouselItem;

Reader.js

import React from 'react'
import { connect } from 'react-redux'
import { compose } from 'recompose'

export class Reader extends React.Component {
        render() {
            const { match, pageLevel } = this.props;
            console.log(match); // undefined

        return (
            <div>
                <div className='reader-body'>         
                        <Book bookId={match.params.bookId} 
                              pageLevel={pageLevel}
                              bank={bank}/>

                </div>

        );
    }
}

Const mapStateToProps = (state) => {
    return {
        metadata: state.book.metadata,
        pageLevel: state.book.pageLevel  
    }
};

const authCondition = (authUser) => !!authUser;

export default compose(
    withAuthorization(authCondition),
    connect(mapStateToProps, mapDispatchToProps),
)(Reader);

【问题讨论】：

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

【解决方案1】：

您可以将组件传递给 component 属性，route props 将自动传递给组件。

<Route
  path="/reader/:bookId"
  component={Reader}
/>

如果你想渲染的东西不仅仅是一个组件，你必须手动传递路由道具。

<Route
  path="/reader/:bookId"
  render={props => <Reader {...props} />}
/>

【讨论】：

感谢您的回答，不幸的是，这些都不起作用。还是被难住了。
@PashaPear 这令人沮丧。如果您使用withRouter 包装 Reader.js 文件中的导出，它是否有效？ export default withRouter(compose(...));

【解决方案2】：

我不确定，但也许mapStateToProps重写你的道具，所以请你先阅读this issue

【讨论】：