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

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}
    </>
  );
};

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

"/RegularNavbar.jsx"

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

Answer 1

您可以使用不同的导航栏创建两个不同的布局（高阶组件），并使用布局 1 包装主页，使用布局 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

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

Change NavBar on HomePage when using React-router-dom

reactjs

create-react-app

react-router-dom