使用从父级传递的道具将路由器导航链接反应到另一个页面

Question

我正在重新制作具有独特“类型”的卡片，这些卡片根据在 react 中传递给它的 props.type 链接到不同的页面。

我是否正确地动态创建了这些路由器链接？

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;

Answer 1

首先，如果标签中只有一个Route，那么使用Switch 标签是没有意义的。因为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，但让它知道props是什么类型

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;

其他事情对我来说看起来不错。