反应多页面路由

时间:2017-07-27 19:25:27

标签: javascript reactjs react-router-dom

我正在使用React构建一个多页应用。我有三个组成部分。 Header会出现在所有网页上,Page1Page2将在标题下方呈现为不同的网页。 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

有人可以指出我做得不对吗?有没有更好的方法来实现我想要的东西?

1 个答案:

答案 0 :(得分:0)

试试这个:

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

因为我们没有为Route指定任何Header,所以无论路径如何都会一直呈现