React Multi Page NavBar 重置其状态

Question

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

    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，但是当页面加载，因此状态不会跨页面加载保留，而是每次都会重置。

我是 React 新手，已经尝试转到其他帖子和 React-bootstrap 文档。如果我更改 href 值以保留在同一页面中（例如通过设置 href="#explora"），一切都会按预期进行。

为了让 React 跨页面路由在 NavBar 中保持状态，我在这里缺少什么？

Answer 1

您可以使用 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;

Answer 2

您是否尝试将 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;

React Multi Page NavBar 重置其状态

React Multipage NavBar reseting its state

navbar

reactjs

react-bootstrap

react-router-dom