Как правильно передать параметр в Link для открытия нужной страницы?

Question

[Владимир Голубь]

Есть пути:
/nazvanie-novosti-type-1
/nazvanie-novosti-type-2
/nazvanie-novosti-type-3
и их очень много.

Они могут ссылаться на несколько компонентов:
Component1
Component2
Component3

Мой Route в данный момент

<Route path=':param'  component={ ComponentWrap }/>

Написал компонент обертку, для остальных 3х.

Link для перехода по ссылке
<Link to='/nazvanie-novosti-type-1' />

Как мне теперь узнать какой тип страницы показывать пользователю ?
Нужно передать параметр в Link ?

Comments

[Владимир Голубь]

Как уйти от проблемы большого числа Route в Switch ?

Answer 1

[Антон Спирин]

Как мне теперь узнать какой тип страницы показывать пользователю ?

Запросить с сервера данные и узнать какого типа новость. В зависимости от типа рендерить нужный компонент.

Comments

[Владимир Голубь]

Антон Спирин можно ли сделать редирект на нужный компонент или это будет не правильный подход ?

[Антон Спирин]

Владимир Голубь, редирект используют для смены url. Если вам не надо менять url, то не надо его использовать.

[Владимир Голубь]

Антон Спирин если раньше в Component1, Component2 и так далее. Было сделано соответствие путей и компонентов для их открытие. То сейчас сделал так:

let { pageInfo } = this.props;
        let resultComponent = null;

        if (pageInfo.type === 'component1') {
            resultComponent = <Component1/>;
        } else if (pageInfo.type === 'component2') {
            resultComponent = <Component2 />;
        } else if (pageInfo.type === 'component3') {
            resultComponent = <Component3 />;
        } else {
            resultComponent = <Page404 />;
        }

        return resultComponent;

Ранее в каждом компоненте было прописано connect, dispatch и так далее.

Как не переписывать все заново, а оставить все как есть ?
Может как то можно динамически возвращать Route с нужным компонентом ?

[Антон Спирин]

Владимир Голубь, не вижу тут проблемы.

getComponent(type) {
  switch (type) {
    case 'component1':
      return Component1;
    case 'component2':
      return Component2;
    case 'component3':
      return Component3;
    default:
      return <Page404 />;
  }
}

render() {
  const { isFetching, pageInfo } = this.props;

  if (isFetching) return <Preloader />;

  const Component = getComponent(pageInfo.type);
  
  return <Component pageInfo={pageInfo} />;
}

[Владимир Голубь]

Антон Спирин,

Все равно не работает, после показа компонента внутренние функции не запускаются, которые прописаны в connect Component1, Component2, Component3.

class ComponentsWrap extends Component {

    constructor(props) {
        super(props);

        this.state = {
            pageLoad: false
        }
    }

    componentDidMount() {
        this.props.infoPage(this.props.match.params.param);
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.props.pageInfo && this.props.pageInfo !== prevProps.pageInfo) {
            this.setState({
                pageLoad: true
            })
        }
    }

    getComonent(type) {
        switch (type) {
            case 'component1':
                return <Component1 history={this.props.history} />;
            case 'component2':
                return <Component2 history={this.props.history} />;
            case 'component3':
                return <Component3 history={this.props.history} />;
            default:
                return <Page404 />;

        }
    }

    render() {
        if (!this.state.pageLoad) {
            console.log('Preload');
            return <p>Preload</p>
        }

        console.log('Получено render', this.state.pageLoad);

        const Component = this.getComonent(this.props.pageInfo.type);

        console.log(Component);

        return Component;
    }
}

export default withRouter(connect(
    state => ({
        pageInfo: state.pageInfo
    }),
    dispatch => () => {
        return {
            infoPage: (page) => dispatch(pageInfo(page)),
        }
    }
)(ComponentsWrap))

[Антон Спирин]

Владимир Голубь, ну одному вам известно, что там за логика и почему она не запускается. Раз уж скинули этот пример, можно было и проблемную логику.

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

param ---> slug
pageInfo ---> page/pageData
infoPage---> fetchPageBySlug
pageLoad ---> isFetching

И не ясно почему page, когда речь идет о новостях.
В моем варианте Switch не случайно отсутствует render. Так не надо дублировать передачу одних и тех же свойств, как это происходит в вашем случае.