javascript - 使用 react-router v4 进行路由的问题

Question

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

• 在它的右侧有一些静态组件，例如一张图片左右。
• 左边是用户列表，每个用户都是一个Link ("/user/:id")

当用户点击列表中的项目时，列表本身应该消失，具有特定用户详细信息的组件应该出现，例如“/用户/1”。

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

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

首先，路由(在 App.jsx 中):

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

然后，在 Home.jsx 中我正在玩 Prop :

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

但是 不幸的是 - 我的 Home.jsx 组件正在安装 每次路径更改 - 从 "/" 到 "/user/:id" 并向前返回。因此，如果它重新安装，每个子组件也会重新安装，这会导致每个 Prop 重新加载，从而导致我的应用程序崩溃......

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

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>

并使用this.props.match.params.id在您的 UserDetails 组件中。或者你可以在 route 内联它

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