gpt4 book ai didi

javascript - 嵌套 react 路由器同级

转载 作者:行者123 更新时间:2023-12-02 23:59:19 25 4
gpt4 key购买 nike

我一直在读这篇文章:Multiple Nested Routes in react-router-dom v4有些人喜欢它,但我无法让我的案子发挥作用。

这里有 2 个 REPL 尝试了文章中描述的每种方法 - 也许我错过了一些东西?

如果你能让这些 REPL 中的任何一个工作,我可能已经准备好了 - 但我更喜欢模块化方法。感谢您的帮助。

模块化为路由 https://codepen.io/anon/pen/XGPKwZ?editors=0010

<Router>
<div className="container">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about/">About</Link></li>
</ul>
<hr />

<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
</div>
</Router>

const Home = ({children, match}) => (
<div>
<h1>Home</h1>
<p>This is the Home Page</p>
<li><Link to="/page2">page2</Link></li>
<li><Link to="/page3">page3</Link></li>
<hr />

<Route path={match.path} component={Page1} />
<Route path={`${match.path}/page2`} component={Page2} />
<Route path={`${match.path}/page3`} component={Page3} />
</div>
)

const About = ({children, match}) =>(
<div>
<h1>About</h1>
<p>This is about</p>
<li><Link to="/about/page5">page5</Link></li>
<li><Link to="/about/page6">page6</Link></li>
<hr />

<Route path='/about/' component={Page4} />
<Route exact path='/about/page5' component={Page5} />
<Route exact path='/about/page6' component={Page6} />
</div>
)

路由周围的容器 https://codepen.io/anon/pen/zbJqXK?editors=0011

 <div className="container">
<Router>
<Switch>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about/">About</Link></li>
</ul>
<Home>
<Route component={({ match }) =>
<div>
<Route exact path='/' component={Page1} />
<Route path='/page2' component={Page2} />
<Route path='/page3' component={Page3} />
</div>
}/>
</Home>
<About>
<Route component={({ match }) =>
<div>
<Route path='/about/' component={Page4} />
<Route path='/about/page5' component={Page5} />
<Route path='/about/page6' component={Page6} />
</div>
}/>
</About>
</Switch>
</Router>
</div>

我有很多带有子页面的页面实例。我可以让一个嵌套布局像这样工作,但是当我尝试在 Switch 下添加为同级布局时,当我尝试访问 RouteC 时,我得到了结果。如果我切换访问 RouteA 时得到的 OOP。

最佳答案

此 Repl 是一个有效的解决方案:https://codepen.io/anon/pen/ZPMBqY?editors=0010

有两个问题主要围绕理解 Switch 的想法。它从最大特异性到最小特异性。

问题 1)将根路径放在最后,这是最不具体的

问题2)确保 parent 的exact是错误的

<Switch>
<Route path="/about" component={About} />
<Route path="/" component={Home} />
</Switch>

问题3)在模块内使用开关

// Home
<Switch>
<Route exact path='/' component={Page1} />
<Route exact path='/page2' component={Page2} />
<Route exact path='/page3' component={Page3} />
</Switch>

// About
<Switch>
<Route path='/about/page5' component={Page5} />
<Route path='/about/page6' component={Page6} />
<Route path='/about/' component={Page4} />
</Switch>

关于javascript - 嵌套 react 路由器同级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55248164/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com