我正在重新整理具有唯一“类型”的卡片，这些卡片根据在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;
首先，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;
其他事情对我来说也很好。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句