Question

在我的Router中，我有一个Route的呈现方法，其中包含显示组件的<Router> <div> <Headers /> <ToggleSwitch /> <Route exact path="/" component={Home} /> <Route path="/library" component={Library} /> <Range /> </div> </Router>：

Library

这很好用。

但是，在<Headers />路线上，我不想展示<ToggleSwitch />或const isHeaderRoute = (!route.includes('library')) {isHeaderRoute && ( <Headers /> <ToggleSwitch /> )}。

所以我希望能够应用以下方法，例如：

HttpUtility.JavaScriptStringEncode

要做到这一点，我可能需要访问URL路径。

如何使用React Router实现此目的？

Answer 1

<Router>
  <div>
    <Route exact path="/" component={Home} />
    <Route path="/library" component={Library} />
    <Range />
  </div>
</Router>

从路线中移除Headers和ToggleSwitch组件，然后将它们放入Home组件中。

如果您想在Router中按window.location.pathname获取路径名并执行您在示例中所做的操作：

const isHeaderRoute = (!window.location.pathname.includes('library'))

{isHeaderRoute && (
  <Headers />
  <ToggleSwitch />
)}

window.location.pathname是一种Javascript方法，而不是react-router方法。你在反应路由器中建议的是不可能的，因为检查需要在路由器外进行，无法访问只能在路由器内访问的路由器路径（通过子组件等）。

Answer 2

我刚刚遇到了同样的问题，用同样的答案解决了as posted here

将您的<Route />包裹在包含<Headers />和<ToggleSwitch />的组件中（反之亦然，这对您的代码更有意义）

EG。（ES6使用react-router-v4）

const SpecialRoute = ({ component: Component, ...rest }: {component: any}) => (
  <div>
    <Headers />
    <ToggleSwitch />
    <Route
      {...rest}
      render={(props: {location: string}) => (
        <Component {...props} />
      )}
    />
  </div>
)

<Router>
  <div>
    <SpecialRoute exact path="/" component={Home} />
    <Route path="/library" component={Library} />
    <Range />
  </div>
</Router>

不要在某些路线上渲染某些组件

2 个答案: