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

我想知道是否可以基于URL更改导航栏项目，而不必使用两个不同的导航栏组件。我的导航栏左侧有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>
    );
  }
}

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

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

。。。
导出默认类布局扩展组件{
render（）{
返回(
);
}
}

Navbar.js

...

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

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

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

const-Navbar=（{match}）=>{
const page=match.params.name
返回(

第1页
第2页
第3页


第4页
第5页
第6页

)
}

您可以有条件地渲染左或右div，如下所示

const-Navbar=（{match}）=>{
const{url}=match；
const showleet=['/page-1'，'/page-2'，'/page-3']；
返回(
{showleet&&（

第1页
第2页
第3页

)}
（！showleet&&(

第4页
第5页
第6页

)}
)
}
组件的目的是：根据路由有条件地呈现页面的各个部分

从v3开始，React路由器鼓励像普通组件一样使用
，而不是声明性路由模式。
有关更多详细信息，请参见此处：

基于以上，您可以这样做：

Navbar.js

...

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

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

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”导入LeftNav；
从“/RightNav.js”导入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>
)

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>
)

导出默认值（）=>(

第1页
第2页
第3页

)

RightNav.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>
)

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>
)

导出默认值（）=>(

第4页
第5页
第6页

)

有关
组件多路径使用的更多详细信息，请查看以下内容：