如何解决React Router在路由更改时创建两个完全相同的组件,如何在两个路由之间重用相同的组件?
我进行了如下快速测试:
<Router>
<Switch>
<Route path="/foo" render={ () => <TestComponent key="test" data="1" /> } />
<Route path="/bar" render={ () => <TestComponent key="test" data="2" /> } />
</switch
</Router>
TestComponent
如下所示:
const TestComponent = withRouter(({ history,data }) => {
const [ value,setValue ] = useState(null);
const loading = !value;
useEffect(() => {
setTimeout(() => {
setValue(data);
history.push('/bar');
},1000 );
},[ data ]);
console.log("**VAL",data,value);
return <div>
{ data } / { loading ? "LOADING" : value }
</div>;
});
因此,当我点击路线/foo
时,组件加载,等待一秒钟,然后使用相同的组件(尽管实例不同)重定向到另一条路线。
调试显示
**VAL 1 null
**VAL 1 1
**VAL 2 null // <-- expected : VAL 2 1
**VAL 2 2
**VAL 2 2
我希望React能够看到两者都是相同的组件,并且不会创建不同的实例。如何让相同的组件响应两条不同的路线?
解决方法
您可以使一个Route
组件具有多个路径,因此多个路径将导致同一组件。更具体地说,path
的{{1}}道具可以采用字符串或字符串数组。在此处查看文档:{{3}}
然后,您可以使用https://reactrouter.com/web/api/Route/path-string-string之一来确定您所处的路线,并根据该路线呈现所需的任何差异。另外,您可以使用react-router
hooks或URL Parameters。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。