Question

我想知道如何解决组件渲染问题...想象一下情况：

我在页面上有4个框，单击每个框会导致重定向到另一页。

每个盒子都有我这样传递的不同数据：

        <Link
          to={{
            pathname: '/someurl/' + sometitle + '/' + someid,
            state: {
              title,
              description,
              purpose}}} > 
               <div></div> 
         </Link>

单击每个框后，一切正常-根据所单击的框，我会收到包含数据的页面。示例网址看起来像这样localhost / someurl / sometitle1 / someid1。

问题是，当我尝试直接从搜索栏转到此链接时...当然，我知道为什么-单击框传递所有数据，因此，如果没有单击，则没有数据。

我只是不知道如何解决这个问题：/

有什么想法吗？

Answer 1

为了实现一种解决方案，您可以在转到页面上的链接时直接向其显示数据，因此必须确保与该页面有关的所有信息已经存在于url中，或者可以从该信息派生。网址

例如，您可以忽略将数据作为状态发送到RouteComponent，而是根据urlParams，someTitle和someId获取数据。

假设您的路线配置为

<Route path="/someurl/:title/:id" component={Component}/>

您可以像编写组件一样

const Component = ({match}) => {
   const {title, id} = match;
   const [data, setData] = useState({});
   useEffect(() => {
       // fetchData based on title and id and update state
   }, [title, id]);
   ...
}

P.S。如果不使用钩子，则可以将useEffect和useState逻辑上方的eh转换为类component的state和componentDidUpdate / componentDidMount生命周期函数

React JS，Router-组件仅在单击链接后才会呈现

1 个答案: