React Multi Page NavBar 重置其状态

Posted 2023-02-22

【中文标题】React Multi Page NavBar 重置其状态

【英文标题】：React Multipage NavBar reseting its state

【发布时间】：2021-08-10 05:02:37

【问题描述】：

尝试使用react-bootstrap设置一个简单的NavBar，我想保持活动页面的状态，这是组件：

    import React,  useState  from 'react';
    import  Navbar, Nav  from 'react-bootstrap';
    
    const Navigation = () => 
        const [activeItem, setActivePage] = useState("initial");
        return (
            <>
                <Navbar bg="primary" variant="dark">
                    <Navbar.Brand href="/page1">Navbar</Navbar.Brand>
                    <Nav activeKey=activeItem onSelect=(e) => setActivePage(e) className="mr-auto">
                        <Nav.Link eventKey="/page1"  href="/page1">Page 1</Nav.Link>
                        <Nav.Link eventKey="/page2"  href="/page2">Page 2</Nav.Link>
                    </Nav>
                    <p>current: activeItem</p>
                </Navbar>
            </>
        )
    
    export default Navigation;

这是主要的 App.js：

import React from 'react';
import  BrowserRouter as Router, Route, Switch  from 'react-router-dom';
import Navigation from './components/Navigation';

import Page1 from './routes/Page1';
import Page2 from './routes/Page2';

const App = () => (
  <>
    <Router>
       <Navigation/>
        <Switch>
          <Route exact path="/page1" component=Page1/>
          <Route  path="/page2" component=Page2/>
        </Switch>
    </Router>
  </>
);

export default App;

我遇到的问题是activeItem 状态变量在每次页面加载时都会被重置。所以activeItem一开始就是"initial"，当我点击一个页面时，它会短暂地变为正确的eventKey，但当页面加载时立即返回到"initial"，因此在页面加载时不会保留状态，但每次都会重置。

我是 react 新手，已经尝试过其他帖子和 react-bootstrap 文档。如果我将 href 值更改为保持在同一页面中（例如，通过设置 href="#explora"），一切都会按预期工作。

我在这里缺少什么来使导航栏中的反应保持状态跨页面路由？

【参考方案1】：

您是否尝试将const [activeItem, setActivePage] = useState("initial"); 移动到 App.js 文件中？

App.js：

import React,  useState  from 'react';
import  BrowserRouter as Router, Route, Switch  from 'react-router-dom';
import Navigation from './components/Navigation';

import Page1 from './routes/Page1';
import Page2 from './routes/Page2';

const App = () => (
  const [activeItem, setActiveItem] = useState('initial');
  
  <>
    <Router>
       <Navigation 
        activeItem=activeItem 
        setActiveItem=setActiveItem
       />
        <Switch>
          <Route exact path="/page1" component=Page1/>
          <Route  path="/page2" component=Page2/>
        </Switch>
    </Router>
  </>
);

export default App;

导航组件：

import React,  useState  from 'react';
import  Navbar, Nav  from 'react-bootstrap';

const Navigation = ( activeItem, setActivePage ) => 
  return (
      <>
        <Navbar bg="primary" variant="dark">
            <Navbar.Brand href="/page1">Navbar</Navbar.Brand>
            <Nav activeKey=activeItem onSelect=(e) => setActivePage(e) className="mr-auto">
                <Nav.Link eventKey="/page1"  href="/page1">Page 1</Nav.Link>
                <Nav.Link eventKey="/page2"  href="/page2">Page 2</Nav.Link>
            </Nav>
            <p>current: activeItem</p>
        </Navbar>
      </>
  )

export default Navigation;

【讨论】：

这似乎不起作用，行为相同，页面加载时状态恢复为默认值。

【参考方案2】：

您可以使用useLocation 挂钩检查位置对象，pathname 属性包含当前页面的路径，并且使用这种方法您不需要将当前页面保存在任何状态。因此，您的Navigation 组件应该如下所示：

import React,  useState  from 'react';
import  useLocation  from 'react-router-dom';
import  Navbar, Nav  from 'react-bootstrap';

const Navigation = () => 
  const location = useLocation();

  return (
    <>
      <Navbar bg="primary" variant="dark">
        <Navbar.Brand href="/page1">Navbar</Navbar.Brand>
        <Nav activeKey=location.pathname className="mr-auto">
          <Nav.Link href="/page1">Page 1</Nav.Link>
          <Nav.Link href="/page2">Page 2</Nav.Link>
        </Nav>
        <p>current: location.pathname</p>
      </Navbar>
    </>
  )


export default Navigation;

【讨论】：

Tx，不起作用抛出：“错误：无效的钩子调用。只能在函数组件的主体内部调用钩子。”

也许你的包版本有冲突。这是一个可以帮助你的指南reactjs.org/warnings/invalid-hook-call-warning.html

1) 检查的 react-dom 版本正常 (17.0) 2) 违反规则，不知道如何检查建议的解决方案是否符合规则，虽然看起来很好 3) React 不重复

终于搞定了，我重新安装了react-router-dom，现在可以工作了，非常感谢您的帮助