Question

我有一个Home.jsx组件，它的路由为"/"。

在它的右侧有一些静态成分，例如图片左右。
在左侧有一个用户列表，每个用户都是一个链接（"/user/:id"）

用户单击列表中的项目时，列表本身应消失，并且具有指定用户详细信息的组件应出现，例如"/user/1"。

当单击back按钮或基本上在页面标题上时，应返回到"/"并再次显示该列表。

我的方法：我基本上所做的是：

首先，路线（在App.jsx中）：

<Route exact path="/" component={Home}/>
<Route path="/user/:id" component={Home}/>

然后，在Home.jsx里面，我在玩道具：

if (this.props.match.path === '/') {
   return <UserList />;
} else {
   return <UserDetails userId={userId} />
}

但是，不幸的是-我的Home.jsx组件在每次更改路径时都被安装-从"/"到"/user/:id"并返回转发。因此，如果重新安装，每个子组件也将重新安装，这将导致每个道具重新加载，这会导致我的应用程序崩溃...

非常感谢您提供任何反馈或帮助，以解决该问题，以及如何在每次更改路径时停止重新安装它。谢谢。

Answer 1

<Route />组件的全部要点是处理您的if语句正在做的事情：根据url有条件地呈现组件。

您希望Home组件同时在/和/user/:id上呈现，而不是完全在/上呈现。

您的App.js文件应如下所示：

<Route path="/" component={Home} />

在Home.js文件中，而不是使用带有if语句的函数，只需呈现<Route />组件。

您可能看起来像

<div>
   {this.figureOutWhichComponentToShow()}
   <StaticContent />
</div>

将其更改为：

<div>
   <Route exact path="/" component={UserList} />
   <Route path="/user/:id" component={UserDetails} />
   <StaticContent />
</div>

，然后在您的UserDetails组件内使用this.props.match.params.id。或者您可以在“路线”中内联

<div>
   <Route exact path="/" component={UserList} />
   <Route path="/user/:id" component={props => 
     <UserDetails userId={props.match.params.id} /> 
   }/>
   <StaticContent />
</div>

react-router v4的路由问题

1 个答案: