Реагировать на многостраничную маршрутизацию

Я создаю многостраничное приложение, используя React. У меня есть три компонента. Header будет отображаться на всех страницах, а Page1 и Page2 должны отображаться под заголовком как разные страницы. Header выглядит так:

class Header extends React.Component {
    return (
        <header component HTML code...>
        {this.props.children} // this is where Page1 and Page2 will render 
                              // depending on the URL 
    );
}

Компонент моего маршрутизатора выглядит так (я использую пакет react-router-dom):

const routes = (
  <BrowserRouter>
    <Switch>
      <Route path="/" component={Header} />
      <Route path="/welcome" component={Page1} />
      <Route path="/default" component={Page2} />
    </Switch>
  </BrowserRouter>
);

Доступ к / отображает заголовок, но /welcome и /default возвращают 404. Я попытался сделать это, используя вложенные маршруты:

<BrowserRouter>
    <Route component={Base}>
        <Route path="/welcome" component={Page1}/>
        <Route path="/landing" component={Page2}/>
    </Route>
</BrowserRouter>

Это дает ошибку-

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

Может ли кто-нибудь указать, что я делаю не так? Есть ли лучший способ добиться того, чего я хочу здесь?


reactjs javascript react-router-dom
person koolkat    schedule 27.07.2017    source источник
comment
Посмотри на это! stackoverflow.com/questions/36262360/react-router-global-header< /а>   -  person aravindaM    schedule 28.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

Попробуй это:

const routes = () =>(
  <BrowserRouter>
    <div>
      <Header />
      <Route path='/welcome' exact component={Page1} />
      <Route path='/default' exact component={Page2} />
    </div>
  </BrowserRouter>
)

Поскольку мы не указали Route для Header, он будет отображаться все время, независимо от пути.

person Giri    schedule 28.07.2017