Блог

Я перерисовываю карточки с уникальными «типами», которые ссылаются на разные страницы на основе props.type, переданного ему в react.

Правильно ли я динамически создаю эти ссылки маршрутизатора?

 import React from 'react';
import {render} from 'react-dom';
import {Route, NavLink, Switch, Redirect} from 'react-router-dom';
import Answered from '../../containers/Blog/answered/answered-posts';
import './Post.css';

import RothIRA from '../../containers/Types/RothIRA';

function post(props) {

  return (
    <article className="Post" onClick={props.clicked}>

      <NavLink to={{
        pathname: '/'   props.type,
        hash: '#submit',
        search: '?quick-submit=true'
      }}>
        {props.type}
      </NavLink>

      <Switch>
        <Route path={'/'   props.type} component={RothIRA}/>
      </Switch>
    </article>

  );

}

export default post;
 

Прежде всего, бессмысленно использовать Switch тег, если в теге есть только один Route . Поскольку Switch тег отображает только тот Route , который соответствует первому, даже если в теге есть два или более совпадающих элементов Switch .

это официальный документ для Switch тега https://reactrouter.com/web/api/Switch

Второй — это RothIRA компонент. Он отображается всегда, независимо от того, какой тип маршрутизируется. Ничего страшного, если вы заставили RothIRA компонент гибко отображать содержимое в соответствии с маршрутом. Но если вы этого не сделаете, он будет отображать одно и то же при каждом маршрутизировании. Если вы это сделали, посмотрите на эти примеры.

в этом примере выполняется рендеринг другого компонента в соответствии с маршрутом

 import React from 'react';
import {render} from 'react-dom';
import {Route, NavLink, Switch, Redirect} from 'react-router-dom';
import Answered from '../../containers/Blog/answered/answered-posts';
import './Post.css';

import RothIRA1 from '../../containers/Types/RothIRA1';
import RothIRA2 from '../../containers/Types/RothIRA2';

function post(props) {

  return (
    <article className="Post" onClick={props.clicked}>

      <NavLink to={{
        pathname: '/'   props.type,
        hash: '#submit',
        search: '?quick-submit=true'
      }}>
        {props.type}
      </NavLink>

      <Switch>
        <Route path={'/1'} component={RothIRA1}/>
        <Route path={'/2'} component={RothIRA2}/>
      </Switch>
    </article>

  );

}

export default post;
 

в этом примере выполняется рендеринг RothIRA , но пусть он знает, какой тип с реквизитами

 import React from 'react';
import {render} from 'react-dom';
import {Route, NavLink, Switch, Redirect} from 'react-router-dom';
import Answered from '../../containers/Blog/answered/answered-posts';
import './Post.css';

import RothIRA from '../../containers/Types/RothIRA';

function post(props) {

  return (
    <article className="Post" onClick={props.clicked}>

      <NavLink to={{
        pathname: '/'   props.type,
        hash: '#submit',
        search: '?quick-submit=true'
      }}>
        {props.type}
      </NavLink>

      <Route path={'/'   props.type} render={() => (<RothIRA type={props.type} />)}/>
    </article>

  );

}

export default post;
 

И другие вещи выглядят хорошо для меня.