React Router v4与交换机嵌套的路由

试图执行以下操作，但它不起作用。React Router v4与交换机嵌套的路由

ReactDOM.render(
    <Router> 
    <div className="route-wrapper"> 
     <Switch> 
     <App> 
      <Route exact path="/" component={HomePage} /> 
      <Route path="/user" component={UserPage} /> 
     </App> 
     <Route component={Err404} /> 
     </Switch> 
    </div> 
    </Router>, 
    document.getElementById('main') 
)

正如文档所述，Switch元素中只允许使用Route和Redirect元素。如何在没有在App中明确包装HomePage和UserPage或让应用程序包装错误页面的情况下如何使其工作？

来源

2017-05-07 Okinawa Terminal

是什么阻止你与组件包裹？ –

App组件包含标题，导航栏和路径中的任何内容。我不希望标题和导航栏在404页面上。 –

然后我会使用来显示你的应用程序部分，并在应用程序内部，你可以做主页和用户页面之间的路由。这是做这件事的v4方法 –

虽然我已经开始开发一个“通用应用程序做出反应”，其中第一个页面加载与服务器端渲染完成后，我遇到了类似的问题，因为阵营，路由器刚刚更新到4.0。你应该考虑重组你的应用程序的东西下面给出：

ReactDOM.render(
    <Router> 
    <div className="route-wrapper"> 
     <Switch> 
     <Route path="/" component={App} /> 
     <Route component={Err404} /> 
     </Switch> 
    </div> 
    </Router>, 
    document.getElementById('main') 
)

当应用程序组件被重构如下：

class App extends React.Component { 
    render() { 
    return <div> 
     <Switch> 
     <Route exact path="/" component={HomePage} /> 
     <Route exact path="/user" component={UserPage} /> 
     </Switch> 
    </div>; 
    } 
}

来源

2017-06-25 08:04:01

关于这个例子：甚至有可能达到Err404组件吗？第一个Route匹配所有内容并加载App组件，在这种情况下将加载Err404组件？它不检测在随后的交换机中是否找不到匹配，是吗？ – FelixZett

React Router v4与交换机嵌套的路由

回答

相关问题