Question

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

我的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;

Answer 2

路由的唯一工作是安装组件。如果要在所有路由中使用无所不在的组件，请将路由视为children到基本组件。

class App extends React.Component {
  render() {
    <div>
      <Header />
      <Sidebar />
      {this.props.children}
    </div>
  }
}

const Routes = () => (
  <App>
    {/* your routes here */}
  </App>
)

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

2 个答案: