Reactjs 布局中的React路由器4和路径参数

我很难理解如何通过布局组件中的React Router 4访问路径参数

系统具有用于管理项目的页面，这些页面可在包含项目id的路径上访问，例如

/projects/1

、

/projects/2

等。 还有其他使用相同布局的非项目页面，例如

/settings

布局在页面顶部呈现导航栏，如果选择了项目，导航栏应包含项目菜单。也就是说，项目菜单应该显示在

/projects/：projectId

，而不是

/settings

以下是我试图实现的目标的简化版本：

感谢您的帮助

这是codesandbox.io链接中的代码：

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom'

const ProjectMenu = () => (
  <div>
    Project menu<br />
    <small>(should only be visible on project pages)</small>
  </div>
)

const NavBar = () => (
  <div style={{
    backgroundColor: 'deepPink',
    padding: 32
  }}>
    {/*
      How can I check for the projectId path param here
      and render the project menu only if it is set?
      Note that the /settings page should not have
      the project menu.
    */}
    <ProjectMenu />
  </div>
)

const Layout = ({ children }) => (
  <div style={{
    backgroundColor: 'hotPink',
  }}>
    <NavBar />
    <div style={{
      padding: 64
    }}>
      {children}
    </div>
  </div>
)

const Start = () => (
  <div>
    <Link to='/projects/1'>Project 1</Link><br />
    <Link to='/projects/2'>Project 2</Link><br />
    <Link to='/settings'>Settings</Link>
  </div>
)

const Project = ({match}) => (
  <div>
    Project {match.params.projectId}<br /><br />
    <Link to='/'>Back</Link>
  </div>
)

const Settings = () => (
  <div>
    Settings<br /><br />
    <Link to='/'>Back</Link>
  </div>
)

const App = () => (
  <BrowserRouter>
    <Layout style={{ padding: 64 }}>
      <Switch>
        <Route path='/projects/:projectId' component={Project} />
        <Route path='/settings' component={Settings} />
        <Route path='/' component={Start} />
      </Switch>
    </Layout>
  </BrowserRouter>
)

render(
  <App />,
  document.getElementById('root')
)

从“React”导入React
从'react dom'导入{render}
从“react router dom”导入{BrowserRouter，Route，Switch，Link}
常量项目菜单=（）=>(
项目菜单

（应仅在项目页面上可见）
)
常量导航栏=（）=>(
{/*
如何在此处检查projectd path参数
并仅在项目菜单已设置时渲染它？
请注意，/settings页不应包含
项目菜单。
*/}
)
常量布局=（{children}）=>(
{儿童}
)
常量开始=（）=>(
项目1

项目2

设置
)
常量项目=（{match}）=>(
项目{match.params.projectId}


返回
)
常量设置=（）=>(
设置


返回
)
常量应用=（）=>(
)
渲染(
,
document.getElementById（'root'））
)

您想这样做吗

 const NavBar = () => (
      <div style={{
        backgroundColor: 'deepPink',
        padding: 32
      }}>
        {/*
          How can I check for the projectId path param here
          and render the project menu only if it is set?
          Note that the /settings page should not have
          the project menu.
        */}
        <Route path='/projects/:projectId' component={ProjectMenu} />
      </div>
    )

const导航栏=（）=>(
{/*
如何在此处检查projectd path参数
并仅在项目菜单已设置时渲染它？
请注意，/settings页不应包含
项目菜单。
*/}
)

您可以通过这种方式接收projectd

const ProjectMenu = ({ match }) => (
  <div>
    Project menu<br />
    <small>(should only be visible on project pages)</small>
    {match.params.projectId}
  </div>
);

constprojectmenu=（{match}）=>(
项目菜单

（应仅在项目页面上可见）
{match.params.projectId}
);

那么问题出在哪里？要隐藏设置页面上的

导航栏

？@请参阅至隐藏设置页面上的

项目菜单

。然后尝试将其从

布局

直接移动到

项目

？或者你试过了吗？问题是

ProjectMenu

应该在

NavBar

中，因此我无法将其移动到

项目组件中。是的，我只想为项目页面显示
ProjectMenu
，例如
/projects/1
，
projects/2
等。您可以使用Route根据路径定义组件应显示的位置。v3和v4之间的区别在于我们不需要在同一位置写入所有路由。