javascript - react-router v4 的路由问题

问题描述

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

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

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

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

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

首先，路线（in 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"

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

标签： javascriptreactjsreact-routerreact-router-v4

解决方案

组件的全部意义<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>

javascript - react-router v4 的路由问题

问题描述

解决方案

推荐阅读