响应路由器v4面包屑
我正在尝试实现为v4反应路由器面包屑
以下是我的路线：
const routes = {
'/': 'Home',
'/page1': 'Page 1',
'/page2': 'Page 2'
};我可以使用这个库在我的应用程序中放置面包屑，但是我有以下问题：
Que.#1:
当我在面包屑中单击Home时，我可以看到http://localhost:8080的URL更改，但是浏览器仍然显示相同的页面。
Que.#2:
当我从Page1导航到Page1时，url从http://localhost:8080/page1更改为http://localhost:8080/page2。
所以面包屑显示了对Home / Page 2的更改，而不是像Home / Page 1 / Page 2那样的更改。
我知道这可能是因为url的主机名后面只有/page2。但是，我能否实现这样的显示：Home / Page 1 / Page 2
下面是我的主App.jsx中的代码
<Router>
<div>
<Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
<Route exact path="/" component={LandingPage}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
</div>
</Router>如果我使用“像下面这样”来满足面包屑的需求，那么我的page2就会在page1下面呈现：
<Router>
<div>
<Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
<Route exact path="/" component={LandingPage}/>
<Route path="/page1" component={Page1}/>
<Route path="/page1/page2" component={Page2}/>
</div>
</Router>答案：
Que.#1:不需要将<Breadcrumbs ..../>元素封装在应用程序的每个组件内的<Router>元素中。这可能是因为在每个组件中包含<Router>元素导致了Router元素的“嵌套”(注意，我们在登陆页面中也有Router标记)，这与react router v4不兼容。
Que.#2:指的是在这里正式标记的答案(由下面的palsrealm回答)
Stack Overflow用户
发布于 2017-10-11 15:03:19
你的面包屑是基于链接的，它们按照设计的方式工作。要显示页面，需要设置一个Switch，其中包含Route，当路径发生变化时，它将加载适当的组件。有点像
<Switch>
<Route path='/' component={Home}/>
<Route path='/page1' component={Page1}/>
<Route path='/page2' component={Page2}/>
</Switch>如果您想让面包屑显示给Home/Page1/Page2，您的routes应该是'/page1/page2' : 'Page 2'。Route也应该相应地改变。
编辑:您的Router应该是
<Router>
<div>
<Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
<Switch>
<Route exact path="/" component={LandingPage}/>
<Route exact path="/page1" component={Page1}/>
<Route path="/page1/page2" component={Page2}/>
</Switch>
</div>
</Router>https://stackoverflow.com/questions/46688592
复制相似问题
腾讯云开发者
