时间戳

首页 > 解决方案 > 使用 React-router-dom 时更改主页上的 NavBar

reactjs - 使用 React-router-dom 时更改主页上的 NavBar

问题描述

我要做的就是为主页设置一个不同的导航栏，为其余页面设置一个不同的导航栏。我用过window.location.pathname和也一样的东西withRouter。这些东西只有在页面重新加载时才有效。从主页使用Link并导航到新页面时，主页的导航栏会保留在其他页面上，直到我重新加载，反之亦然。

对我有用的是使用

useEffect(()=> { document.getElementById("id of home nav").style.display = "none" document.getElementById("id of regular nav").style.display = "block" },[]}

但是，我必须在每个单独的组件页面上执行此操作。我想知道是否有更好的方法来做到这一点。谢谢您的帮助。

编辑：这是我现在尝试过的

"/HomeNavbar.jsx"

  return (
    <>
      {window.location.pathname === "/" ? (
        "Home Navbar Code Here"
      ) : null}
    </>
  );
};

因此，当我从其他页面遍历到主页时，这非常有效。我在我的常规导航栏中写了一个类似的代码，但又遇到了同样的问题。导航栏仅在我重新加载页面后加载。

"/RegularNavbar.jsx"

return (
    <>
      {window.location.pathname === "/" ? null : (
       "Regular Navbar code Here"
      )}
    </>
  );
};

标签： reactjscreate-react-appreact-router-dom

解决方案

您可以使用不同的导航栏创建两个不同的布局（高阶组件），并用 layout1 和其他组件用布局 2 包装主页

import React from 'react';
import { Link } from 'react-router-dom';
const Layout1 = (props) => (
  <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>
      <div>{props.children}</div>
  </div>
);

export default Layout1;

布局2：

import React from 'react';
import { Link } from 'react-router-dom';
const Layout2 = (props) => (
  <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topicgdfgdgs</Link></li>
      </ul>
      <p>this is a different nav bar, different from the home page</p>
      <div>{props.children}</div>
      <hr/>
  </div>
);

export default Layout2;

家庭组件：

import React from 'react';
import Layout1 from '../Layouts/Layout1';
const Home = () => (
  <Layout1>
    <div>
      <h2>Home</h2>
    </div>
  </Layout1>
);

export default Home;

任何其他组件：

import React from 'react';
import { Link, Route } from 'react-router-dom';
import Layout2 from '../Layouts/Layout2';

const Topics = ({ match }) => (
  <Layout2>
    <div>
      <h3>topics</h3>
    </div>
  </Layout2>
);

export default Topics;

堆栈闪电战示例

推荐阅读