Question

我正在使用React创建一个具有很多父/子页面的应用程序。主要导航将是面包屑。在回购https://github.com/sqren/react-router-breadcrumb-example

之后，我已经从thew实现了代码

这行得通，尽管我无法使面包屑显示多个子页面。例如。站点仪表板/远程维护我需要显示更多这样的子页面... 站点仪表板/远程维护/控制面板（选项卡式）/网络设备/网络设备

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);

Answer 1

对于对此感兴趣的任何人，我都可以使用Routes和Breadcrumbs。事实证明，所有页面上的所有路径路径都必须准确且“绝对”，如下所示...

从https://github.com/sqren/react-router-breadcrumb-example开始与Breadcrumbs.js结合使用，可以很好地满足我的需求。

const routes =
{
    '/': 'Home',
    '/CompanyDashboard': 'Company Dashboard',
    '/CompanyDashboard/CompanyAccDetails': 'Company Account Details',
    '/Sites': 'Sites',
    '/Sites/SiteDashboard': 'Site Dashboard',
    '/Sites/SiteDashboard/SiteAccDetails': 'Site Account Details',
    '/Sites/SiteDashboard/SiteSetup': 'Site Setup',
    '/Sites/SiteDashboard/SiteSetup/AddDevice': 'Add Device',
    '/RemoteMaintenance': 'Remote Maintenence',
    '/RemoteMaintenance/ControlPanel': 'Control Panel',
    '/RemoteMaintenance/ControlPanel/NetworkDevices': 'Network Devices',
    '/RemoteMaintenance/ControlPanel/NetworkDevices/NetworkDevice': 'Network Device',
    '/RemoteMaintenance/ControlPanel/Zones': 'Zones',
    '/RemoteMaintenance/ControlPanel/Zones/Zone': 'Zone',
    '/RemoteMaintenance/ControlPanel/EventLog': 'Event Log',
    // '/topics/:topicId': params => params.topicId
};

和..

    <Route exact path="/" component={Home} />

    <Route exact path="/CompanyDashboard" component={CompanyDashboard} />
    <Route exact path="/CompanyDashboard/CompanyAccDetails" component={CompanyAccDetails} />

    <Route exact path="/Sites" component={Sites} />
    <Route exact path="/Sites/SiteDashboard" component={SiteDashboard} />
    <Route exact path="/Sites/SiteDashboard/SiteAccDetails" component={SiteAccDetails} />
    <Route exact path="/Sites/SiteDashboard/SiteSetup" component={SiteSetup} />
    <Route exact path="/Sites/SiteDashboard/SiteSetup/AddDevice" component={AddDevice} />

    <Route exact path="/RemoteMaintenance" component={RemoteMaintenance} />
    <Route exact path="/RemoteMaintenance/ControlPanel" component={ControlPanel} />
    <Route exact path="/RemoteMaintenance/ControlPanel/NetworkDevices" component={NetworkDevices} />
    <Route exact path="/RemoteMaintenance/ControlPanel/NetworkDevices/NetworkDevice" component={NetworkDevice} />
    <Route exact path="/RemoteMaintenance/ControlPanel/Zones" component={Zones} />
    <Route exact path="/RemoteMaintenance/ControlPanel/Zones/Zone" component={Zone} />
    <Route exact path="/RemoteMaintenance/ControlPanel/EventLog" component={EventLog} />

此处的屏幕截图示例...

React Router v4-使用子页面获取面包屑的长列表

1 个答案: