我正试图弄清楚如何使用Creative Tim的模板。
我有专业工具包模板(提供主页等(，然后现在尝试将其与仪表板集成。
我目前拥有的routes/index.js文件有：
import CoreLayout from '../layouts/CoreLayout'
import Home from './Home'
import LoginRoute from './Login'
import SignupRoute from './Signup'
import ProjectsRoute from './Projects'
import AccountRoute from './Account'
import NotFoundRoute from './NotFound'
import AboutRoute from "./AboutUs"
import HiringRoute from './Hiring'
import ApplyRoute from './Apply'
import PartneringRoute from './Partnering'
import MediaRoute from './Media'
import TermsRoute from './Terms'
import PrivacyRoute from './Privacy'
import DisclaimerRoute from './Disclaimer'
import HowRoute from './How'
import StudioRoute from './Studio'
import MatchRoute from './Match'
import StructuringRoute from './Structuring'
import ResourcesRoute from './Resources'
import ToolkitRoute from './Toolkit'
import FaqRoute from './Faq'
import SolResRoute from './Solres'
import SolIndRoute from './Solind'
import SolPfroRoute from './Solpfro'
import SolGrRoute from './Solgr'
import SolInRoute from './Solin'
import SolPolRoute from './Solpol'
import SolSerRoute from './Solser'
import GlossaryRoute from './Glossary'
import DiligenceRoute from './Diligence'
import DocumentRoute from './Document'
import CasestudyRoute from './Casestudy'
import LessonRoute from './Lesson'
import SolasRoute from './Solas'
/* Note: Instead of using JSX, we recommend using react-router
PlainRoute objects to build route definitions. */
export const createRoutes = store => ({
path: '/',
component: CoreLayout,
indexRoute: Home,
childRoutes: [
AccountRoute(store),
LoginRoute(store),
SignupRoute(store),
ProjectsRoute(store),
AboutRoute(store),
HiringRoute(store),
ApplyRoute(store),
PartneringRoute(store),
MediaRoute(store),
TermsRoute(store),
PrivacyRoute(store),
DisclaimerRoute(store),
HowRoute(store),
StudioRoute(store),
MatchRoute(store),
StructuringRoute(store),
ResourcesRoute(store),
ToolkitRoute(store),
FaqRoute(store),
SolResRoute(store),
SolIndRoute(store),
SolPfroRoute(store),
SolGrRoute(store),
SolInRoute(store),
SolPolRoute(store),
SolasRoute(store),
SolSerRoute(store),
GlossaryRoute(store),
DocumentRoute(store),
DiligenceRoute(store),
CasestudyRoute(store),
LessonRoute(store),
// AsyncRoute(store) // async routes setup by passing store
// SyncRoute, // sync routes just need route object by itself
/* Place all Routes above here so NotFoundRoute can act as a 404 page */
NotFoundRoute(store)
],
})
/* Note: childRoutes can be chunked or otherwise loaded programmatically
using getChildRoutes with the following signature:
getChildRoutes (location, cb) {
require.ensure([], (require) => {
cb(null, [
// Remove imports!
require('./Counter').default(store)
])
})
}
However, this is not necessary for code-splitting! It simply provides
an API for async route definitions. Your code splitting should occur
inside the route `getComponent` function, since it is only invoked
when the route exists and matches.
*/
export default createRoutes
Creative Tim模板格式的Dashboard文档包括：
src/routes/index.jsx
import Pages from "layouts/Pages.jsx";
import RTL from "layouts/RTL.jsx";
import Dashboard from "layouts/Dashboard.jsx";
var indexRoutes = [
{ path: "/rtl", name: "RTL", component: RTL },
{ path: "/pages", name: "Pages", component: Pages },
{ path: "/", name: "Home", component: Dashboard }
];
export default indexRoutes;
然后，它为每个仪表板、页面和RTL都提供了额外的文件。
例如，routes/dashboard.jsx具有：
import Dashboard from "views/Dashboard/Dashboard.jsx";
import Buttons from "views/Components/Buttons.jsx";
import GridSystem from "views/Components/GridSystem.jsx";
import Panels from "views/Components/Panels.jsx";
import SweetAlert from "views/Components/SweetAlert.jsx";
import Notifications from "views/Components/Notifications.jsx";
import Icons from "views/Components/Icons.jsx";
import Typography from "views/Components/Typography.jsx";
import RegularForms from "views/Forms/RegularForms.jsx";
import ExtendedForms from "views/Forms/ExtendedForms.jsx";
import ValidationForms from "views/Forms/ValidationForms.jsx";
import Wizard from "views/Forms/Wizard.jsx";
import RegularTables from "views/Tables/RegularTables.jsx";
import ExtendedTables from "views/Tables/ExtendedTables.jsx";
import ReactTables from "views/Tables/ReactTables.jsx";
import GoogleMaps from "views/Maps/GoogleMaps.jsx";
import FullScreenMap from "views/Maps/FullScreenMap.jsx";
import VectorMap from "views/Maps/VectorMap.jsx";
import Charts from "views/Charts/Charts.jsx";
import Calendar from "views/Calendar/Calendar.jsx";
import Widgets from "views/Widgets/Widgets.jsx";
import UserProfile from "views/Pages/UserProfile.jsx";
import TimelinePage from "views/Pages/Timeline.jsx";
import RTLSupport from "views/Pages/RTLSupport.jsx";
import pagesRoutes from "./pages.jsx";
// @material-ui/icons
import DashboardIcon from "@material-ui/icons/Dashboard";
import Image from "@material-ui/icons/Image";
import Apps from "@material-ui/icons/Apps";
// import ContentPaste from "@material-ui/icons/ContentPaste";
import GridOn from "@material-ui/icons/GridOn";
import Place from "@material-ui/icons/Place";
import WidgetsIcon from "@material-ui/icons/Widgets";
import Timeline from "@material-ui/icons/Timeline";
import DateRange from "@material-ui/icons/DateRange";
var pages = [
{
path: "/timeline-page",
name: "Timeline Page",
mini: "TP",
component: TimelinePage
},
{
path: "/user-page",
name: "User Profile",
mini: "UP",
component: UserProfile
},
{
path: "/rtl/rtl-support-page",
name: "RTL Support",
mini: "RS",
component: RTLSupport
}
].concat(pagesRoutes);
var dashRoutes = [
{
path: "/dashboard",
name: "Dashboard",
icon: DashboardIcon,
component: Dashboard
},
{
collapse: true,
path: "-page",
name: "Pages",
state: "openPages",
icon: Image,
views: pages
},
{
collapse: true,
path: "/components",
name: "Components",
state: "openComponents",
icon: Apps,
views: [
{
path: "/components/buttons",
name: "Buttons",
mini: "B",
component: Buttons
},
{
path: "/components/grid-system",
name: "Grid System",
mini: "GS",
component: GridSystem
},
{
path: "/components/panels",
name: "Panels",
mini: "P",
component: Panels
},
{
path: "/components/sweet-alert",
name: "Sweet Alert",
mini: "SA",
component: SweetAlert
},
{
path: "/components/notifications",
name: "Notifications",
mini: "N",
component: Notifications
},
{ path: "/components/icons", name: "Icons", mini: "I", component: Icons },
{
path: "/components/typography",
name: "Typography",
mini: "T",
component: Typography
}
]
},
{
collapse: true,
path: "/forms",
name: "Forms",
state: "openForms",
icon: "content_paste",
views: [
{
path: "/forms/regular-forms",
name: "Regular Forms",
mini: "RF",
component: RegularForms
},
{
path: "/forms/extended-forms",
name: "Extended Forms",
mini: "EF",
component: ExtendedForms
},
{
path: "/forms/validation-forms",
name: "Validation Forms",
mini: "VF",
component: ValidationForms
},
{ path: "/forms/wizard", name: "Wizard", mini: "W", component: Wizard }
]
},
{
collapse: true,
path: "/tables",
name: "Tables",
state: "openTables",
icon: GridOn,
views: [
{
path: "/tables/regular-tables",
name: "Regular Tables",
mini: "RT",
component: RegularTables
},
{
path: "/tables/extended-tables",
name: "Extended Tables",
mini: "ET",
component: ExtendedTables
},
{
path: "/tables/react-tables",
name: "React Tables",
mini: "RT",
component: ReactTables
}
]
},
{
collapse: true,
path: "/maps",
name: "Maps",
state: "openMaps",
icon: Place,
views: [
{
path: "/maps/google-maps",
name: "Google Maps",
mini: "GM",
component: GoogleMaps
},
{
path: "/maps/full-screen-maps",
name: "Full Screen Map",
mini: "FSM",
component: FullScreenMap
},
{
path: "/maps/vector-maps",
name: "Vector Map",
mini: "VM",
component: VectorMap
}
]
},
{ path: "/widgets", name: "Widgets", icon: WidgetsIcon, component: Widgets },
{ path: "/charts", name: "Charts", icon: Timeline, component: Charts },
{ path: "/calendar", name: "Calendar", icon: DateRange, component: Calendar },
{ redirect: true, path: "/", pathTo: "/dashboard", name: "Dashboard" }
];
export default dashRoutes;
如何集成主路线文件以合并Creative Tim仪表板？
据我所知，在使用react处理creative tim时，只需从"creative tim的仪表板示例项目"中获取(/copy(您需要的内容，并将其粘贴到您的项目中。
确保你有创造性tim使用的工具，例如materialui。
您可能会根据工具版本进行一些修改。