React - 可以根据呈现的其他组件来设置组件的样式吗？

Question

我有一个搜索组件，当主页组件呈现时，我希望搜索组件呈现在页面底部。当呈现任何其他页面组件时，我希望 Search 组件位于页面顶部。

目前我的 app.js 为：

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/work' component={Work} />
        <Route path='/contact' component={Contact} />
      </Switch>
    </BrowserRouter>
  )
}

在页面组件内部：

const Contact = () => {
    return (
      <div>
        <Search />
        Contact
      </div>
    )
}

显然，这种方式意味着我必须将 Search 组件添加到每个组件中，并选择将其放置在顶部还是底部。

我的问题是这样的，我可以像这样将它放在 app.js 上吗：

const App = () => {
  return (
    <BrowserRouter>
      <Search />
      <Switch>
        <Route path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/work' component={Work} />
        <Route path='/contact' component={Contact} />
      </Switch>
    </BrowserRouter>
  )
}

然后根据要呈现的页面组件，设置搜索组件的样式，使其显示在页面的顶部或底部。

谢谢

Answer 1

我会在 Search 组件中添加一个 className 属性并添加一些 if 语句。 例如：

<Search className={location === '/' ? 'top' : 'bottom'} />

Answer 2

使用 React Router 提供的 useLocation() 钩子，你可以确定你在哪个页面。

const Contact () => {
  const location = useLocation();

  const styles = location === "something" ? {...topStyles} : {...downStyles};

  return (
    <div>
      <Search style={styles} />
      Contact
    </div>
  )
}