尝试通过<route>或<link />传递道具

Question

我正在尝试通过路由器传递一个道具，并尝试了多个解决方案，所有这些解决方案都传递了一个空道具。

最初，我试图传递匹配对象以访问URL参数，但现在我决定传递任何东西。

使用 react-router-dom （我认为是路由器v4）。 另外，我正在SearchArtist.js

中正确导入任何相关内容

 import ArtistDetails from './ArtistDetails'
 import {
     BrowserRouter,
     Route,
     Link
 } from 'react-router-dom'

这是ArtistDetails.js，在所有3次尝试中都保持不变

ArtistDetails.js

class ArtistDetailsComp extends React.Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        console.log(this.props)
    }

    render() {
        <div></div>
    }
}

我尝试过：

尝试1＃-在Route中使用渲染

SearchArtist.js

<Link to='/artist'>

<Route path='/artist' render={(props) => (
    <ArtistDetails something='hello' {...props} />
)} />

在ArtistDetails.js中登录控制台会返回空道具

尝试2＃-将对象传递到链接

SearchArtist.js

<Link to={{ pathname: '/artist', state: { foo: 'bar'} }}>
     {item.longTitle}
</Link>

<Route path='/artist' component={ArtistDetails}/>

在ArtistDetails.js中登录控制台会返回空道具

尝试3＃-在链接中使用参数

SearchArtist.js

<Link to='/artist' params={{ something: 'hello' }}>
     {item.longTitle}
</Link>

<Route path='/artist' component={ArtistDetails}/>

在ArtistDetails.js中登录控制台会返回空道具

我没有收到任何错误，render（）中的任何内容都可以正常工作，我只是无法将任何信息传递给我的班级。这是我的第一个React项目，我不知道我是否缺少基本知识。

解决方案

我试图在一个更简单的项目中复制错误，但没有，发现这是我导出组件的方式。

我改变了

export default function ArtistDetails(){
    return (
        <ArtistDetailsComp />
    )
}

公正

export default ArtistDetails

然后将类从ArtistDetailsComp重命名为ArtistDetails``，并且有效。

---

export default function ArtistDetails(props){
    return (
        <ArtistDetailsComp props={props} />
    )
}

这也行得通，原来我根本没有在出口中传递道具，所以当我打电话给道具时，显然什么都没有，希望以后能对其他人有所帮助。

Answer 1

我希望这会有所帮助，

尝试编写render()，

<Route path="/artist" render={() => <ArtistDetails newProps={this.props} />} /> 

尝试使用component，

<Route path="/artist" component={() => <ArtistDetails newProps={this.props} />} />

将道具传递到React-Router路线，

<Route
  path="/artist"
  render={(routeProps) => (
    <ArtistDetails {...routeProps} {...props} />
  )}
/>

使用新的更新直接可行，

<Route path="/artist" render={(props) => <ArtistDetails {...props} />} />

class ArtistDetails extends React.Component {
  render() {    
    return (
      <React.Fragment>
        {this.props}
      </React.Fragment>
    );
  }
}