在使用HomePage - NavBar -dom时更改HomePage上的路由器

Question

所有我想做的是有一个不同的导航栏的主页和一个不同的其他页面。我用过像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"
      )}
    </>
  );
};

Answer 1

您可以用不同的导航栏创建两个不同的布局(高阶组件)，并用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;

stackblitz example