React JS - 如何根据 URL 路径显示/隐藏组件的某些部分？

Question

我想知道是否可以根据 URL 更改导航栏项目 而无需使用 2 个不同的导航栏组件。我的导航栏左侧有 3 个链接，右侧有 3 个链接，但我想一次显示每一侧。

例如：当我在 /page-1, /page-2, /page-3 时，我只想显示左侧，而当我在 /page-4, /page-5, /page-6 时，我想显示右侧。我尝试了一些 match.params 但没有运气。我怎样才能做到这一点？对不起我的英语

Layout.js

... export default class Layout extends Component { render() { return ( <div> <Route path="/:name" component={Navbar} /> <SomeContentComponent /> </div> ); } }

Navbar.js

const Navbar = ({ match }) => { const page = match.params.name return ( <div> <ul className="left"> <li><Link to="/page-1">Page 1</Link></li> <li><Link to="/page-2">Page 2</Link></li> <li><Link to="/page-3">Page 3</Link></li> </ul> <ul className="right"> <li><Link to="/page-4">Page 4</Link></li> <li><Link to="/page-5">Page 5</Link></li> <li><Link to="/page-6">Page 6</Link></li> </ul> </div> ) }

Answer 1

您可以像这样有条件地向左或向右渲染 div

const Navbar = ({ match }) => {

  const { url } = match;
  const showLeft = ['/page-1', '/page-2', '/page-3'].indexOf(url) > -1;

  return (
    <div>
      {showLeft && (<ul className="left">
        <li><Link to="/page-1">Page 1</Link></li>
        <li><Link to="/page-2">Page 2</Link></li>
        <li><Link to="/page-3">Page 3</Link></li>
      </ul>
      )}
      (!showLeft && (
      <ul className="right">
        <li><Link to="/page-4">Page 4</Link></li>
        <li><Link to="/page-5">Page 5</Link></li>
        <li><Link to="/page-6">Page 6</Link></li>
      </ul>
      )}
    </div>
  )
}

Answer 2

<Route /> 组件的目的是：根据路由有条件地呈现页面的各个部分

React 路由器，从 v3 开始，鼓励像普通组件一样使用 <Route /> 而不是声明式路由模式。有关详细信息，请查看此处： https://reacttraining.com/react-router/web/guides/philosophy

所以基于以上，你可以这样做：

Navbar.js

import LeftNav from "./LeftNav.js";
import RightNav from "./RightNav.js";

const Navbar = () => (
  <>
    <Route path={['/page-1', '/page-2', '/page-3']} component={LeftNav} />
    <Route path={['/page-4', '/page-5', '/page-6']} component={RightNav} />
  </>
)

并且在您的左右组件中：

LeftNav.js :

export default () => (
  <ul className="left">
    <li><Link to="/page-1">Page 1</Link></li>
    <li><Link to="/page-2">Page 2</Link></li>
    <li><Link to="/page-3">Page 3</Link></li>
  </ul>
)

RightNav.js :

export default () => (
  <ul className="right">
    <li><Link to="/page-4">Page 4</Link></li>
    <li><Link to="/page-5">Page 5</Link></li>
    <li><Link to="/page-6">Page 6</Link></li>
  </ul>
)

更多关于<Route />组件多路径的使用方法，请看这里： Multiple path names for a same component in React Router

React JS - 如何根据 URL 路径显示/隐藏组件的某些部分？

React JS - How can I show / hide some parts of component based on URL path?

html

javascript

css

router

reactjs