反应路由器嵌套路由不起作用

时间:2018-08-18 20:11:26

标签: javascript reactjs

我的任务是在tensor([]) 上打开Main products,并在/上打开Misc products,并使用相同的布局(页眉和页脚),然后打开/misc About上没有布局

/about

并且如果在import React from 'react'; import {render} from 'react-dom'; import {BrowserRouter as Router, Route, Switch, Link, Redirect} from 'react-router-dom' const About = () => "About"; const Error = () => "404"; class AdvertsList extends React.Component { render() { let {match} = this.props; return ( <div className="container"> <header>Header</header> <main> <nav> <Link to="/">Main products</Link> # <Link to="/misc">Misc products</Link> # <Link to="/about">About</Link> </nav> <div className="content"> <Switch> <Route path="/" exact={true} render={() => "Main products"}/> <Route path="/misc" render={() => "Misc products"}/> <Redirect to="/" /> </Switch> </div> </main> <footer>Footer</footer> </div> ) }; } class App extends React.Component { render() { return ( <Router> <Switch> <Route path="/" exact={true} component={AdvertsList}/> <Route path="/about" component={About}/> <Route path="*" component={Error}/> </Switch> </Router> ); } } render(<App/>, document.querySelector("#app")); 上打开了Main products并且/链接也可以正常工作,那么尽管进行了所有/about设置,/misc链接仍然无法运行,{{1 }}返回,我无法访问其他产品。

2 个答案:

答案 0 :(得分:2)

我认为不是:

<Route path="/" exact={true} component={AdvertsList} />

您想要的:

<Route path="/" component={AdvertsList} />

此外,如果您只是将道具设置为true,则可以写出道具名称,以供将来参考。

例如:

<Thing disabled={true} />

等效于:

<Thing disabled />

答案 1 :(得分:2)

由于确切的属性,您的第一个路由仅解析为根,而不会解析任何其他路由。因此/misc会自动跳到您的错误路线。

您可以将misc路由添加为App组件上的另一个Route组件。 或通过

<Route path="/(|misc)" exact={true} component={AdvertsList} />

这会将//misc都解析为AdvertsList,其确切属性仍解析为true。您可以通过添加诸如|misc|settings|varia

之类的额外管道来添加其他路由