Merge branch 'application-mgt-new' into 'application-mgt-new'

Add router config

See merge request entgra/carbon-device-mgt!56
feature/appm-store/pbac
Dharmakeerthi Lasantha 6 years ago
commit 93c935f719

@ -1,19 +1,26 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css"; import "antd/dist/antd.css";
import { renderRoutes } from "react-router-config"; import RouteWithSubRoutes from "./components/RouteWithSubRoutes";
import {
BrowserRouter as Router,
Link,
} from 'react-router-dom';
class App extends React.Component { class App extends React.Component {
routes;
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.routes = props.routes;
route : props.route
}
} }
render() { render() {
return ( return (
<Router>
<div> <div>
{renderRoutes(this.state.route.routes)} {this.routes.map((route) => (
<RouteWithSubRoutes key={route.path} {...route} />
))}
</div> </div>
</Router>
); );
} }

@ -0,0 +1,19 @@
import React from 'react';
import {Route} from 'react-router-dom';
class RouteWithSubRoutes extends React.Component{
props;
constructor(props){
super(props);
this.props = props;
}
render() {
return(
<Route path={this.props.path} render={(props) => (
<this.props.component {...props} routes={this.props.routes}/>
)}/>
);
}
}
export default RouteWithSubRoutes;

@ -1,41 +1,27 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import { renderRoutes } from "react-router-config"; import App from "./App"
import Login from "./pages/Login"
import Dashboard from "./pages/dashboard/Dashboard" import Dashboard from "./pages/dashboard/Dashboard"
import Login from "./pages/Login";
import {BrowserRouter} from "react-router-dom";
const routes = [ const routes = [
{ {
component: App, path: '/publisher/Login',
routes: [
{
path: "/publisher",
exact: true,
component: Dashboard,
routes: [
{
path: "/publisher/a",
component: Login component: Login
}
]
}, },
{ {
path: "/publisher/login", path: '/publisher/dashboard',
component: Login component: Dashboard
}
]
} }
]; ]
ReactDOM.render( <BrowserRouter> ReactDOM.render( <App routes={routes}/>, document.getElementById('root'));
{/* kick it all off with the root route */}
{renderRoutes(routes)}
</BrowserRouter>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change // If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls. // unregister() to register() below. Note this comes with some pitfalls.

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Layout, Menu, Breadcrumb } from 'antd'; import { Layout, Menu, Breadcrumb, PageHeader } from 'antd';
const { Header, Content, Footer } = Layout; const { Header, Content, Footer } = Layout;
@ -8,15 +8,15 @@ import Logo from "../../../public/images/logo.svg";
import Login from "../Login"; import Login from "../Login";
import {renderRoutes} from "react-router-config"; import {renderRoutes} from "react-router-config";
import {NavLink} from "react-router-dom"; import {NavLink} from "react-router-dom";
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
class Dashboard extends React.Component { class Dashboard extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
route : props.route routes : props.routes
} }
console.log(props);
} }
render() { render() {
@ -35,19 +35,20 @@ class Dashboard extends React.Component {
<Menu.Item key="3">nav 3</Menu.Item> <Menu.Item key="3">nav 3</Menu.Item>
</Menu> </Menu>
</Header> </Header>
<Content style={{ padding: '0 50px' }}> <Content style={{ padding: '0 0' }}>
<Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb style={{ margin: '16px 50px' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item> <Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item> <Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item> <Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
<NavLink exact to="/publisher/a" className="nav-link" > <PageHeader
Items title="Title"
</NavLink> />
<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
{/* child routes won't render without this */} {this.state.routes.map((route) => (
{renderRoutes(this.state.route.routes, { someProp: "these extra props are optional" })} <RouteWithSubRoutes key={route.path} {...route} />
<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div> ))}
</div>
</Content> </Content>
<Footer style={{ textAlign: 'center' }}> <Footer style={{ textAlign: 'center' }}>
©2019 entgra.io ©2019 entgra.io

@ -21,6 +21,9 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = { const config = {
devtool: "source-map", devtool: "source-map",
output: {
publicPath: '/publisher/' // <---- this
},
watch: false, watch: false,
resolve: { resolve: {
alias: { alias: {

Loading…
Cancel
Save