New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Breadcrumbs Example in V4 Documentation #4556
Comments
You can adapt the code from the recursive path example to do this: https://reacttraining.com/react-router/examples/recursive-paths |
@msaron Maybe something like this can do a job
|
@garmjs have you figured out a way to do this without recursion? Trying to get this matched up with bootstrap breadcrumb styling, they expect the items to be siblings of each other. |
Some late night coding that seems to work so far with bootstrap 4 breadcrumb styles. Would like some feedback and suggestion on code cleanup if any. Note:
|
@shawnmclean it looks pretty clean to me, and the solution works , go for it 👍 |
@shawnmclean, thank you. A little cleaned and added a link Home in the beginning of breadcrumbs
|
Hi! @slava-viktorov
In this modded Breadcrumbs function, I have added a simple console log. If I visit http://localhost:3000/ I don't get anything, but If I visit http://localhost:3000/users I get Home/Users as expected. How can I get a Home breadcrumb item on home route? |
Hi, @mgscreativa. |
It would be nice to display the breadcrumbs code with a "Home" text with no link in the home route. At least is what I expect, is that possible? |
@mgscreativa, In my code, the home page displays breadcrumbs with the text Home without a link. |
Hi @slava-viktorov Just tested and I don't get anything if I'm at home Accessing home (http://localhost:3000/) I get:
Accessing /users (http://localhost:3000/users) I get:
This is my actual code
|
I was struggling with this as well. @slava-viktorov's approach didn't seem to work for dynamic urls like import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import Route from 'route-parser';
const isFunction = value => typeof value === 'function';
const getPathTokens = pathname => {
const paths = ['/'];
if (pathname === '/') return paths;
pathname.split('/').reduce((prev, curr) => {
const currPath = `${prev}/${curr}`;
paths.push(currPath);
return currPath;
});
return paths;
};
function getRouteMatch(routes, path) {
return Object.keys(routes)
.map(key => {
const params = new Route(key).match(path);
return {
didMatch: params !== false,
params,
key
};
})
.filter(item => item.didMatch)[0];
}
function getBreadcrumbs({ routes, match, location }) {
const pathTokens = getPathTokens(location.pathname);
return pathTokens.map((path, i) => {
const routeMatch = getRouteMatch(routes, path);
const routeValue = routes[routeMatch.key];
const name = isFunction(routeValue)
? routeValue(routeMatch.params)
: routeValue;
return { name, path };
});
}
function Breadcrumbs({ routes, match, location }) {
const breadcrumbs = getBreadcrumbs({ routes, match, location });
return (
<div>
Breadcrumb:
{breadcrumbs.map((breadcrumb, i) =>
<span key={breadcrumb.path}>
<Link to={breadcrumb.path}>
{breadcrumb.name}
</Link>
{i < breadcrumbs.length - 1 ? ' / ' : ''}
</span>
)}
</div>
);
}
export default withRouter(Breadcrumbs); Breadcrumbs can then be added like import Breadcrumb from './Breadcrumb'
// routes must contain the route pattern as key, and the route label as value
// label can be either a simple string, or a handler which receives
// the matched params as arguments
const routes = {
'/': 'Home',
'/about': 'About',
'/topics': 'Topics',
'/topics/:topicId': params => params.topicId
};
...
<Breadcrumb routes={routes} /> |
Hi @sqren Your approach may be rigth but I think that a real breadcrumbs component should't need to fill the routes object or any config, maybe will take the route names from the URL... |
@mgscreativa I agree that it would be better, if the routes didn't have to be duplicated, and could instead come from the original react-router config.
|
@sqren Code seems to be working well with dynamic URLs. I used in my project till now no issue 👍 Any thought on this? |
Is there a "cut and dry ready" example for |
Thanks @sqren for putting me on the right track! I was having trouble with the following use case where the user models need to be fetched and populated into our redux store before it can be displayed: url: Plus I wasn't a fan of the extra
|
@icd2k3 Just skimming through it, I like your suggestion a lot more than mine. Especially that you use I'll try it out for my use case later this week, and will let you know if I have any feedback. |
@icd2k3 I use your solution in my production app. |
@icd2k3 Great solution, declarative and simple 👍 🍺 |
Take a look at react-breadcrumbs-dynamic. Just declare breadcrumb items as you generally declare any other components and that is all. |
Can you return back v3's routes prop and give us the list of routes? Look at beautiful ant.design's breadcrumb integration with react-router@2 and react-router@3... Now it is broken. It's very important to pass the router name (Users -> John Smith) as a route's prop for further using it in the breadcrumb. Will you do it? |
@hosembafer there are a number of solutions in this thread and open source modules to do this for you. I don’t think it’s something react-router needs to support out-of-the-box because not everyone uses breadcrumbs in their app. react-router-breadcrumbs-hoc and react-breadcrumbs-dynamic should both work for your case |
It's the different things, I can do like you say, but it can't concurrent in with react-router old version's method. +Now I have a backward compatibility issue. In my React App architecture in each level of routing, I'm just added the name of the entity to and it's all... now I need to include and implement third-party package to do this. I think this issue not only my. And I don't know why it cleared from v4. |
The react-router is not an library for communication between components. It allows or does not allow you to do some things which may be considered as communication possibility. If you want suggests some communication features to react-router, may be better to create separated ticket with details about that. If you create an application, you select the libraries that you want to use (they are all third-party, except yours). You choose a way to communicate between your application subsystems. You can choose what you like, react-redux, react-through, etc, or write it manually. If you write a library of components and tools. You can provide components wich allows to build some user interface features (for example breadrumbs and its items). Also you can provide tools how to integrate your components in application and organize communication between parts of application and also suggest to use another ways which possible to use. Users can choose tools for integrating application and communication that they like. |
I'm not about communication. They are not all third-party in my context. I have a standard stack of packages which I use in every project. react, react-router, antd components etc. From which I solve all my needs. But react-router@4 has removed a very useful feature, and now I want to know why, and maybe it is possible to rollback it. When a router can return path of routing endpoint, it's useful info and can be used in other components, but now, I need to manage my routes state manually for passing into breadcrumb. |
In old versions, if I have a router, so automatically I have breadcrumb based on a router, but now router doesn't provide API, and I want to know why backward compatibility is broken. Maybe it is a bug? |
React components in application is isolated from each other. When you need to pass some data from one to another you can specify props, use context, or some another way may be a library. These are ways to trasfer data through react tree or communication between components. Before react-router have to distribute configuration of routes through react tree. It was possible to put some data into that structure and extract some data from it using this as data communication way. But React Router is a collection of navigational components that compose declaratively with your application - from the intro of its documentatin. Data communications or some state distribution is not declared. You can choose which solutions to use. You may use some communication way to transfer some data. Or you can use breadcrumbs solutions without data transfer wich makes as much as possible without data transfer but only based on router information which is currently provided. There two question: Is it possible to do by react-router internals to build configuration structure of all routes and transfer it through react tree? And would developers planing to add this feature with possibility to add user defined data to that structure into future releases? This questions is another topic but not this topic where breadcrumbs is discussed. It may be not visible to developers in huge of closed tickets. If it will be suggested as separated issue then more probably to be noticed and answered. This ticket it only use case and good reference to that ticket and questions. |
Thank you for the detailed explanation. I got you. |
@shawnmclean if you want the breadcrumbs items as sibling you can do this const Breadcrumbs = (props) => (
<div className="breadcrumbs">
<ul className='container'>
<Route path='/:path' component={BreadcrumbsItem} />
</ul>
</div>
)
const BreadcrumbsItem = ({ ...rest, match }) => (
<>
<li className={match.isExact ? 'breadcrumb-active' : undefined}>
<Link to={match.url || ''}>
{match.url}
</Link>
</li>
<Route path={`${match.url}/:path`} component={BreadcrumbsItem} />
</>
) This will work React 16 onwards as I'm using |
Could you add a breadcrumbs example to the V4 documentation? It was provided in the previous version. Thanks.
The text was updated successfully, but these errors were encountered: