javascript - 使用react-router-dom在react中全局使用Header

Question

我目前正在使用 react-router-dom 在我的网络应用程序中创建导航。

我的index.js和App.js看起来像:

Index.js

ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App />
        </Provider>
    </BrowserRouter>,
    document.getElementById('root')
);

App.js

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route exact path ='/' component={Home} />
          <Route path ='/container' component={Container} />
          <Route path ='/profile' component={ProfilePage} />
        </div>
      </BrowserRouter>
    );
  }
}

我的想法是，如果 Home 包含标题和侧边栏，它也会为其他组件保留它，例如 Container 和 ProfilePage。

我的Home的渲染如下:

  render() {
    return (
      <div>
        <Header />
        <div className="App">
          <Sidebar />
          <Container className="container-comp" />
          {this.renderLoggingOutput()}

        </div>
      </div>
    );
  }

但是当我链接到 /profile 时，它只显示 ProfilePage 组件，没有标题和侧边栏。

有什么帮助吗？

Answer 1

将标题放在路由之外:

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
       <Header /> <-------- place here or outside the routes at a minimum
        <div>
          <Route exact path ='/' component={Home} />
          <Route path ='/container' component={Container} />
          <Route path ='/profile' component={ProfilePage} />
        </div>
      </BrowserRouter>
    );
  }
}

我的一个应用程序有类似的结构。路线如下所示:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
          <Switch>
            <Route exact path='/' component={Dashboard}/>
            <Route path='/character/:id' component={CharacterDetails}/>
            <Route path='/encounter/:id' component={Encounter}/>
.........
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;