Question

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

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

我曾尝试提及类似的问题，但找不到解决方案，将不胜感激。

App.js

ImportError: dlopen(/Users/Jackie/anaconda/envs/deepchem/lib/python3.5/site-packages/rdkit/Chem/rdmolops.so, 2): Library not loaded: /opt/X11/lib/libXrender.1.dylib

BookCarouselItem.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;

Reader.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;

Answer 1

您只需将组件赋予component道具，route props就会自动传递到该组件。

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

如果要渲染的不仅仅是一个组件，则必须手动传递路径道具。

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

Answer 2

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

无法访问使用react-router 4传递的url参数

2 个答案: