Я использую React для создания приложения, которое имеет много родительских / дочерних страниц.
Главной навигацией будут хлебные крошки. Я реализовал код из следующего репо https://github.com/sqren/react-router-breadcrumb-example
Это работает нормально, хотя я не могу заставить хлебные крошки отображать более 1 дочерней страницы. Например. Панель инструментов сайта / Удаленное обслуживание
Мне нужно отобразить больше страниц детей, как это ...
Панель инструментов сайта / Удаленное обслуживание / Панель управления (вкладка) / Сетевые устройства / Сетевое устройство
Home.js - это место, где хранятся маршруты. App.js содержит временный список страниц с полным URL-адресом для тестирования. Breadcrumbs.js взят из репо выше, который показывает только 1 дочернюю страницу (нужно показать больше).
Я включил скриншот здесь: https://www.screencast.com/t/5xIUasbcymrJ
Любой совет приветствуется.
Спасибо.
Home.js
import React from "react";
import Breadcrumbs from './Breadcrumbs';
import { MDBContainer } from 'mdbreact';
// 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',
'/LoginHome': 'Login',
'/CompanyDashboard': 'Company Dashboard',
'/CompanyAccDetails': 'Company Account Details',
'/Sites': 'Sites',
'/SiteDashboard': 'Site Dashboard',
'/SiteAccDetails': 'Site Account Details',
'/SiteSetup': 'Site Setup',
'/AddDevice': 'Add Device',
'/PreviousMaintenance': 'Remote Maintenence',
'/ControlPanel': 'Control Panel',
'/NetworkDevices': 'Network Devices',
'/NetworkDevice': 'Network Device'
// '/topics/:topicId': params => params.topicId
};
function HomeBreadcrumbs() {
return (
<MDBContainer fluid>
<hr />
<Breadcrumbs routes={routes} />
<hr />
</MDBContainer>
);
}
// use this function for parameters on URL
/* const Topics = ({ match }) =>
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic} />
<Route
exact
path={match.url}
render={() => <h3>Please select a topic.</h3>}
/>
</div>;
const Topic = ({ match }) =>
<div>
<h3>
{match.params.topicId}
</h3>
</div>; */
export default HomeBreadcrumbs;
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
//import { Breadcrumbs, Breadcrumb } from 'react-breadcrumbs';
import "./assets/scss/mdb.scss"
// Page Components
import Home from './Home'
import LoginHome from './LoginHome'
import CompanyDashboard from './Components/Company/CompanyDashboard'
import CompanyAccDetails from './Components/Company/CompanyAccDetails'
import Sites from './Components/Company/Sites/Sites'
import SiteDashboard from './Components/Company/Sites/SiteDashboard'
import SiteAccDetails from './Components/Company/Sites/SiteDashboard/SiteAccDetails'
import SiteSetup from './Components/Company/Sites/SiteDashboard/SiteSetup'
import AddDevice from './Components/Company/Sites/SiteDashboard/AddDevice'
import PreviousMaintenance from './Components/Company/Sites/RemoteMaintenance/PreviousMaintenance'
import ControlPanel from './Components/Company/Sites/RemoteMaintenance/ControlPanel'
import NetworkDevices from './Components/Company/Sites/RemoteMaintenance/ControlPanel/NetworkDevices'
import NetworkDevice from './Components/Company/Sites/RemoteMaintenance/ControlPanel/NetworkDevice'
const App = () => <div>
<Router>
<div className="row">
<div className="col-sm-6">
<img src={logo} className="orisec-logo" alt="Orisec logo" />
</div>
<div className="col-sm-6 header-login pr-5">
<Link to="/LoginHome">Log In <i className="fa fa-sign-in-alt"></i></Link>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-sm-12">
<ul>
<li><Link to="/">Home (Breadcrumbs)</Link></li>
<li><Link to="/CompanyDashboard">Company Dashboard</Link></li>
<li><Link to="/CompanyAccDetails">Company Dashboard / Company Account Details</Link></li>
<li><Link to="/Sites">Sites</Link></li>
<li><Link to="/SiteDashboard">Site Dashboard</Link></li>
<li><Link to="/SiteAccDetails">Site Dashboard / Site Account Details</Link></li>
<li><Link to="/SiteSetup">Site Dashboard / Site Setup</Link></li>
<li><Link to="/AddDevice">Site Dashboard / Site Setup / Add Device</Link></li>
<li><Link to="/PreviousMaintenance">Site Dashboard / Remote Maintenance (previous history)</Link></li>
<li><Link to="/ControlPanel">Site Dashboard / Remote Maintenance / Control Panel (tabbed)</Link></li>
<li><Link to="/NetworkDevices">Site Dashboard / Remote Maintenance / Control Panel (tabbed) / Network Devices</Link></li>
<li><Link to="/NetworkDevice">Site Dashboard / Remote Maintenance / Control Panel (tabbed) / Network Devices / Network Device</Link></li>
</ul>
<Route extract path="/LoginHome" component={LoginHome} />
<Route extract path="/" component={Home} />
<Route extract path="/CompanyDashboard" component={CompanyDashboard} />
<Route extract strict path="/CompanyAccDetails" component={CompanyAccDetails} />
<Route extract path="/Sites" component={Sites} />
<Route extract path="/SiteDashboard" component={SiteDashboard} />
<Route extract path="/SiteAccDetails" component={SiteAccDetails} />
<Route extract path="/SiteSetup" component={SiteSetup} />
<Route extract path="/AddDevice" component={AddDevice} />
<Route extract path="/PreviousMaintenance" component={PreviousMaintenance} />
<Route extract path="/ControlPanel" component={ControlPanel} />
<Route extract path="/NetworkDevices" component={NetworkDevices} />
<Route extract path="/NetworkDevice" component={NetworkDevice} />
</div>
</div>
</div>
</Router>;
</div>
export default App
Breadcrumbs.js
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>
{' '}
{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);