个人中心
gpt4 book ai didi

reactjs - 如何防止导航栏菜单在导航时重新渲染？ react 路由器 v4

转载 作者：行者123 更新时间：2023-12-03 13:45:44 24 4
gpt4 key购买 nike

我正在从 API 服务器获取数据以动态生成导航栏菜单。

问题是每次我浏览页面时菜单都会重新呈现。无法弄清楚为什么会发生这种情况。我尝试了 react-router v4 的不同示例，例如使用，但菜单总是重新渲染。

动态生成菜单时，使用什么模式来防止导航栏菜单重新呈现？

以下是基本设置文件:

Main.js 文件:

import React from 'react'
import { Route } from 'react-router-dom'
import Home2 from './Home'
import Head from './Head'
import Rules from './Rules'

const Main = () => (
  <main>
    <Route  path='/' component={Head}/>
    <Route exact path='/' component={Home}/>
    <Route exact path='/rules' component={Rules}/>
  </main>
)

export default Main

Head.js 文件:

import React, { Component } from 'react'
import Menu from 'semantic-ui-react'

class Head extends Component {
  constructor(props) {
   super(props);
  }

  getInitialData() {
    //fetch data from server
  }

  componentWillMount() {
    this.getInitialData();
  }

  render() {
    return (
      <header>
        <nav>
          <Menu>
            {/* fetched data */}
        </nav>
      </header>
    )
  }
}

export default Head

Index.js 文件:

import React from 'react'
import { render } from 'react-dom'
import Main from './components/Main'
import { BrowserRouter } from 'react-router-dom'

render((
  <BrowserRouter>
    <Main />
  </BrowserRouter>
), document.getElementById('root'));

使用 React Router v3 这段代码可以正常工作:

var Routes = (
  <Router>
    <Route path="/" component={Head}>
      <IndexRoute component={Home} />
    </Route>
  </Router>
);

但是在 v4 中我无法嵌套路由。

最佳答案

尽管已经很晚了，但我想我应该在这里为其他可能为此苦苦挣扎的人发布答案。

首先，根据 @JulesDupont 的回答，您的 <Head />组件应该位于您的路线之外。

const App = () => (
  <>
    <Head />
    <Switch>
      <Route exact path='/' component={Component 1}/>
      // Add any other routes goes here
    </Switch>
  </>
)

export default App;

此外，您正在搜索的模式是使用 <Link>标签来自 react-router-dom 。如果您能在这里发布您的 Head 组件，那就太好了。您很有可能正在使用 <a href='/#'>标签来重定向而不是 <Link to='/#'> <Menu /> 内的标签.

<a>标签会触发整个页面重新加载，导致您的 <Head />每次导航到新页面时都会重新安装组件，从而重新获取所有数据。然而，<Link>标签不会触发整页重新加载。

示例:

import { Link } from 'react-router-dom';

const Head = () => {
    return (
        <ul>
            <Link to='/your-route'>Item 1 (fetches data)<Link>
            <Link to='/your-other-route'>Item 2 (fetches data)</Link>
        </ul>
    )
}

export default Head;

这将确保您的 Head 组件在导航到另一条路线时不会重新渲染或重新获取数据。

关于reactjs - 如何防止导航栏菜单在导航时重新渲染？ react 路由器 v4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48251509/

24 4 0
文章推荐： reactjs - 记录 setState 调用
文章推荐： javascript - 没有键的 react 列表
文章推荐： wordpress - 使用 Woocommerce 作为后端并使用 ReactJS 作为前端？
文章推荐： reactjs - Webpack 文件加载器 publicPath