Попытка передать реквизит через <Route /> или <Link />

Question

Я пытаюсь пропустить опору через маршрутизатор и пробовал несколько решений, каждое из которых пропускает пустую опору.

Сначала я пытался передать объект сопоставления для доступа к параметрам URL, но я решил передать что-то ... что-нибудь на этом этапе.

Использование response-router-dom , то есть router 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 # - Использование рендера в маршруте

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>
    );
  }
}