如何根据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 />组件的用途是：根据路由有条件地呈现页面的部分。

从v3开始，React路由器鼓励像普通组件一样使用<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