Added routings

feature/appm-store/pbac
jayasanka 6 years ago
parent 3dc7758d20
commit c7cb3319eb

@ -13,8 +13,9 @@
"antd": "^3.15.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts": "2.1.8",
"react-router-dom": "latest"
"react-router-config": "^5.0.0",
"react-router-dom": "latest",
"react-scripts": "2.1.8"
},
"devDependencies": {
"@babel/core": "^7.0.0",

@ -1,18 +1,20 @@
import React from "react";
import "antd/dist/antd.css";
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Dashboard from "./pages/dashboard"
import Login from "./pages/Login"
import { renderRoutes } from "react-router-config";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
route : props.route
}
}
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/publisher" component={Dashboard} exact/>
<Route path="/publisher/login" component={Login}/>
</Switch>
</BrowserRouter>
<div>
{renderRoutes(this.state.route.routes)}
</div>
);
}
}

@ -3,8 +3,39 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { renderRoutes } from "react-router-config";
import Dashboard from "./pages/dashboard/Dashboard"
import Login from "./pages/Login";
import {BrowserRouter} from "react-router-dom";
ReactDOM.render(<App />, document.getElementById('root'));
const routes = [
{
component: App,
routes: [
{
path: "/publisher",
exact: true,
component: Dashboard,
routes: [
{
path: "/publisher/a",
component: Login
}
]
},
{
path: "/publisher/login",
component: Login
}
]
}
];
ReactDOM.render( <BrowserRouter>
{/* 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
// unregister() to register() below. Note this comes with some pitfalls.

@ -0,0 +1,60 @@
import React from "react";
import { Layout, Menu, Breadcrumb } from 'antd';
const { Header, Content, Footer } = Layout;
import styles from './Dashboard.less';
import Logo from "../../../public/images/logo.svg";
import Login from "../Login";
import {renderRoutes} from "react-router-config";
import {NavLink} from "react-router-dom";
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
route : props.route
}
console.log(props);
}
render() {
return (
<Layout className="layout">
<Header>
<div style={{backgroundImage: "url(" + { Logo} + ")"}} className={styles.logo}/>
<Menu
theme="light"
mode="horizontal"
defaultSelectedKeys={['2']}
style={{ lineHeight: '64px' }}
>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<NavLink exact to="/publisher/a" className="nav-link" >
Items
</NavLink>
{/* child routes won't render without this */}
{renderRoutes(this.state.route.routes, { someProp: "these extra props are optional" })}
<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
©2019 entgra.io
</Footer>
</Layout>
);
}
}
export default Dashboard;

@ -0,0 +1,7 @@
.logo {
width: 120px;
height: 31px;
background: rgba(0,0,0,.2);
margin: 16px 24px 16px 0;
float: left;
}

@ -1,19 +0,0 @@
import React from "react";
import { version, Button } from 'antd';
import {Link} from 'react-router-dom';
class Dashboard extends React.Component {
render() {
return (
<div className="App">
<p>Currentdddddd antd version: {version}</p>
<p>Please fork this codesandbox to reproduce your issue.</p>
<p> fork 这个链接来重现你碰到的问题</p>
<Link to="/publisher/login">login</Link>
<Button type="primary">Hello</Button>
</div>
);
}
}
export default Dashboard;
Loading…
Cancel
Save