我正在使用 React 创建一个有很多父/子页面的应用程序。主要导航将是面包屑。我已经从以下 repo https://github.com/sqren/react-router-breadcrumb-example实现了代码
尽管我无法让面包屑显示超过 1 个子页面,但这可以正常工作。例如。站点仪表板/远程维护我需要显示更多这样的子页面...站点仪表板/远程维护/控制面板(选项卡式)/网络设备/网络设备
Home.js 是保存路由的地方。App.js 包含用于测试目的的显示完整 URL 的临时页面列表。Breadcrumbs.js 取自上面的 repo,仅显示 1 个子页面(需要显示更多)。
我在这里包含了一个屏幕截图:https ://www.screencast.com/t/5xIUasbcymrJ
任何建议表示赞赏。谢谢。
主页.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;
应用程序.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
面包屑.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);