Question

我是React的初学者，还有一个我尚无法解决的下一个问题：我想在除Home之外的所有路径组件中渲染<NavBar/>。我有以下代码无法解决任何问题：

const App = props => {

  function getBar() {
    if(props.location === "/"){
      return <NavBar/>
    }
  };

  return (
    <Router>
      <div className="App">
        {getBar()}
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/feed" component={Feed} />
          <Route path="/profile" component={Profile} />
          <Route path="/newPost" component={NewPost}/>
        </Switch>   
      </div>
    </Router>
  );
}

Answer 1

您可以使用pathname：

if (props.location.pathname === "/") {

或创建一个新的Route并确切指定要呈现它的位置：

<Route path={['/feed', '/profile', ...]} exact component={Navbar} />

注意：请记住将其保留在Switch之外。

Answer 2

替换

{getBar()}

使用

{window.location.pathname !== "/" && getBar()}

反应-如何仅在某些确切的路径上渲染组件？

2 个答案: