React-Router:嵌套路由和父级重新渲染 [英] React-Router: Nested Routes and Parent re-render

问题描述

我正在使用 react-router v4 并且在嵌套路由方面遇到了一些麻烦.我的父路由是一个产品详细信息页面，它使用 componentDidMount() 中的 AJAX 请求来设置产品数据.

但是当我单击链接以呈现嵌套在详细信息页面中的路由时，父路由会重新呈现并且 AJAX 请求是否第二次?

这是一些快速示例代码:

const App = () =>(<路由器><开关><Route path="/login" component={LoginPage}/><Route path="/admin" component={AdminPage}/></开关></路由器>)const AdminPage = ({match}) =>(<开关><路由精确路径={match.path} component={Home}/><路由路径={`${match.path}/products/:id`} component={ProductDetails}/><路由路径={`${match.path}/products`} component={ProductList}/></开关>)class ProductDetails 扩展 React.Component {构造函数(){极好的();this.state = {名称: ''，价格: ''};}componentDidMount(){API.getProductDetails((响应) => {this.setState({名称: response.name,价格: response.price});})}使成为(){返回(<div><h1>{this.state.name}</h1><p>{this.state.price}</p><ul><li><Link to={`${this.props.match.url}/stats}>Stats</Link></li><li><Link to={`${this.props.match.url}/bids}>出价</Link></li><li><Link to={`${this.props.match.url}/third}>Third</Link></li><开关><路由路径={`${this.props.match.path}/stats} component={Stats}/><路由路径={`${this.props.match.path}/bids} component={Bids}/><路由路径={`${this.props.match.path}/third} 组件={Third}/></开关>

);}}

那么，当我打开嵌套在其中的路由之一时，如何防止父组件 (ProductDetails) 重新渲染?感谢您的帮助！

解决方案

就我而言，使用 render 道具代替 component 并没有解决这个问题.我的问题是关于 HOC，我不得不将它从路由中删除:

<路由path="/:locale";render={({ 匹配:{ url } }) =>(<开关><路线精确的路径={`${url}/登录`}组件={hocCausingIssue(LoginPage)}/></开关>)}/>

变成:

<路由path="/:locale";render={({ 匹配:{ url } }) =>(<开关><路由精确路径={`${url}/login`} component={LoginPage}/></开关>)}/>//登录页面export default hocCausingIssue(LoginPage)//现在它不再导致问题

I am using react-router v4 and am having a little trouble with nested routes. My parent route is a product detail page that uses an AJAX request within componentDidMount() to set the product data.

But when I click a link to render a route nested in the detail page the parent route re-renders and does the AJAX request a second time?

Here is some quick example code:

const App = () => (
  <Router>
    <Switch>
      <Route path="/login" component={LoginPage} />
      <Route path="/admin" component={AdminPage} />
    </Switch>
  </Router>
)

const AdminPage = ({match}) => (
  <Switch>
    <Route exact path={match.path} component={Home} />
    <Route path={`${match.path}/products/:id`} component={ProductDetails} />
    <Route path={`${match.path}/products`} component={ProductList} />
  </Switch>
)

class ProductDetails extends React.Component {
  constructor(){
    super();
    this.state = {
      name: '',
      price: ''
    };
  }
  componentDidMount(){
    API.getProductDetails((response) => {
      this.setState({
        name: response.name,
        price: response.price
      });
    })
  }
  render(){
    return(
      <div>
        <h1>{this.state.name}</h1>
        <p>{this.state.price}</p>
        <ul>
          <li><Link to={`${this.props.match.url}/stats}>Stats</Link></li>
          <li><Link to={`${this.props.match.url}/bids}>Bids</Link></li>
          <li><Link to={`${this.props.match.url}/third}>Third</Link></li>
        </ul>
        <Switch>
          <Route path={`${this.props.match.path}/stats} component={Stats} />
          <Route path={`${this.props.match.path}/bids} component={Bids} />
          <Route path={`${this.props.match.path}/third} component={Third} />
        </Switch>
      </div>
    );
  }
}

So how would I prevent the parent component (ProductDetails) from re-rendering when I open one of the routes nested in it? Thank you for any help!

解决方案

In my case, using render prop instead of component did not solve this. My problem was about HOCs, I had to remove it from the route :

<Route
  path="/:locale"
  render={({ match: { url } }) => (
    <Switch>
      <Route
        exact
        path={`${url}/login`}
        component={hocCausingIssue(LoginPage)}
      />
    </Switch>
  )}
/>

Became :

<Route
  path="/:locale"
  render={({ match: { url } }) => (
    <Switch>
      <Route exact path={`${url}/login`} component={LoginPage} />
    </Switch>
  )}
/>

// LoginPage
export default hocCausingIssue(LoginPage) // Now it no longer causes issue

这篇关于React-Router:嵌套路由和父级重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！