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

Question

我正在根据在反应中传递给它的 props.type 将具有独特“类型”的卡片 link 重新发送到不同的页面。

我动态创建这些路由器 link 是否正确？

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 但让它知道道具是什么类型

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;

其他方面对我来说也不错。

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

React Router Navlink to another Page using props passed from a Parent

javascript

reactjs

react-router

react-link