javascript - 使用从父级传递的道具将路由器导航链接反应到另一个页面
问题描述
我正在重新制作具有独特“类型”的卡片,这些卡片根据在反应中传递给它的 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;
解决方案
首先,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
但让它知道 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;
其他事情对我来说看起来不错。
推荐阅读
- python - 具有歧义的上下文无关语法 - 使用 Ply lex/yacc 生成器的小型编译器
- loopbackjs - Loopback - 如何维护角色
- ruby-on-rails - mongo驱动程序没有检测到rails中的主节点
- oracle - 如何在oracle中加入2个包含null的表?
- c# - 当我们使用 new 关键字初始化一个值类型时会发生什么?
- matlab - 矩阵与矩阵元素
- swift - 线程 10:致命错误:在展开可选值时意外发现 nil
- python - 根据模型预测,在损失中使用自定义函数的返回值
- vba - 在同一单元格中输入值和背景公式
- javascript - Reactjs:有人可以向我详细说明这一行吗