响应路由器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回答)
回答 3
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>Stack Overflow用户
发布于 2017-12-03 19:50:37
这也可以通过临时设置来实现，这将允许您使用路由配置对象来设置面包屑。我已经将其开源为这里，但源代码也如下所示：
Breadcrumbs.jsx
import React from 'react';
import { NavLink } from 'react-router-dom';
import { withBreadcrumbs } from 'withBreadcrumbs';
const UserBreadcrumb = ({ match }) =>
<span>{match.params.userId}</span>; // use match param userId to fetch/display user name
const routes = [
{ path: 'users', breadcrumb: 'Users' },
{ path: 'users/:userId', breadcrumb: UserBreadcrumb},
{ path: 'something-else', breadcrumb: ':)' },
];
const Breadcrumbs = ({ breadcrumbs }) => (
<div>
{breadcrumbs.map(({ breadcrumb, path, match }) => (
<span key={path}>
<NavLink to={match.url}>
{breadcrumb}
</NavLink>
<span>/</span>
</span>
))}
</div>
);
export default withBreadcrumbs(routes)(Breadcrumbs);withBreadcrumbs.js
import React from 'react';
import { matchPath, withRouter } from 'react-router';
const renderer = ({ breadcrumb, match }) => {
if (typeof breadcrumb === 'function') { return breadcrumb({ match }); }
return breadcrumb;
};
export const getBreadcrumbs = ({ routes, pathname }) => {
const matches = [];
pathname
.replace(/\/$/, '')
.split('/')
.reduce((previous, current) => {
const pathSection = `${previous}/${current}`;
let breadcrumbMatch;
routes.some(({ breadcrumb, path }) => {
const match = matchPath(pathSection, { exact: true, path });
if (match) {
breadcrumbMatch = {
breadcrumb: renderer({ breadcrumb, match }),
path,
match,
};
return true;
}
return false;
});
if (breadcrumbMatch) {
matches.push(breadcrumbMatch);
}
return pathSection;
});
return matches;
};
export const withBreadcrumbs = routes => Component => withRouter(props => (
<Component
{...props}
breadcrumbs={
getBreadcrumbs({
pathname: props.location.pathname,
routes,
})
}
/>
));Stack Overflow用户
发布于 2018-01-23 18:45:16
下面的组件应该在任何深度返回一个面包屑，但主页上的情况除外(原因很明显)。你不需要反应路由器的面包屑。我的第一次公开演讲，所以如果我错过了一个重要的部分，如果有人能指出这一点，那就太好了。我为crumbs添加了»，但是您显然可以对其进行更新以满足您的需要。
import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Link } from 'react-router-dom'
// styles
require('./styles/_breadcrumbs.scss')
// replace underscores with spaces in path names
const formatLeafName = leaf => leaf.replace('_', ' ')
// create a path based on the leaf position in the branch
const formatPath = (branch, index) => branch.slice(0, index + 1).join('/')
// output the individual breadcrumb links
const BreadCrumb = props => {
const { leaf, index, branch } = props,
leafPath = formatPath(branch, index),
leafName = index == 0 ? 'home' : formatLeafName(leaf),
leafItem =
index + 1 < branch.length
? <li className="breadcrumbs__crumb">
<Link to={leafPath}>{leafName}</Link>
<span className="separator">»</span>
</li>
: <li className="breadcrumbs__crumb">{leafName}</li>
// the slug doesn't need a link or a separator, so we output just the leaf name
return leafItem
}
const BreadCrumbList = props => {
const path = props.match.url,
listItems =
// make sure we're not home (home return '/' on url)
path.length > 1
&& path
// create an array of leaf names
.split('/')
// send our new array to BreadCrumb for formating
.map((leaf, index, branch) =>
<BreadCrumb leaf={leaf} index={index} branch={branch} key={index} />
)
// listItem will exist anywhere but home
return listItems && <ul className="breadcrumbs">{listItems}</ul>
}
const BreadCrumbs = props =>
<Route path="/*" render={({ match }) => <BreadCrumbList match={match} />} />
export default BreadCrumbshttps://stackoverflow.com/questions/46688592
复制相似问题
腾讯云开发者
