React JS dynamic generate the Navigation/routing, Generate
routing by JSON data
Created project using
Visual Studio 2019
APP.JS
import React, { Component } from 'react';
import Cnt from './comp/myTest';
export default class App extends
Component {
displayName = App.name
render() {
return (
<div>
<h1>Ganesha</h1>
<Cnt />
</div>
)
}
}
myTest.JSX
import React, { Component } from 'react';
import Home from './home';
import { BrowserRouter as Router, Link, NavLink, Redirect, Prompt } from 'react-router-dom';
import Route from 'react-router-dom/Route';
import Login from './user'
import Contact from './contact'
class Counter extends
Component {
state = {
loginSt: false,
navigation: [{ id: 1, path: '/', render: Home, linkName: 'Home' }, { id: 2, path: '/about', render: Contact,
linkName: 'Contact Us' }]
};
render() {
return (
<Router>
<div>
<div class="sidenav">
<input type="button" value={this.state.loginSt
? 'Log Out' : 'Log In'} onClick={this.loginHandle.bind(this)} />
{/* dynamic generate the link and
route : [Link] */}
{
this.state.navigation.map((post)
=>
<NavLink exact activeStyle={{
color: 'orange' }} to={post.path}
key={post.id}>{post.linkName}</NavLink>
)
}
{/* * * * * * * * */}
<NavLink exact activeStyle={{ color: 'orange' }} to="/contact">Contact</NavLink>
<NavLink exact activeStyle={{ color: 'orange' }} to="/user/Ganesha">User</NavLink>
</div>
<div class="main">
<Prompt
when={!this.state.loginSt}
message={(location)
=> { return
location.pathname.startsWith('/user') ? 'You are not logged in. Are you
sure want to go home page?' : true }}
/>
<Route path="/contact" exact strict render={
() => {
return (<Login user="swamyjee" />)
}
} />
<Route path="/user/:username" exact strict render={({ match }) => (
this.state.loginSt ? (<User username={match.params.username}
/>) : (<Redirect to="/" />)
)} />
{/* dynamic generate the link and route : [Route] */}
{
this.state.navigation.map(({
path, render }, key) =>
<Route path={path} exact strict
key={key} component={render} />
)
}
{/* * * * * * * * */}
</div>
</div>
</Router >
/*<div>
<div
class="sidenav">
<a
href="#about">About</a>
<a
href="#services">Services</a>
<a
href="#clients">Clients</a>
<a
href="#contact">Contact</a>
</div>
<div
class="main">
<Home />
</div>
</div>*/
);
}
loginHandle = (p1) => {
this.setState(p2 => ({
loginSt: !p2.loginSt
}))
}
}
export default Counter;
const User = (params) => {
return (<h1>Welcome User {params.username}</h1>)
}
/*
*
<NavLink exact activeStyle={{ color: 'orange' }}
to="/">Home</NavLink>
<NavLink exact activeStyle={{ color:
'orange' }} to="/about">About</NavLink>
*
//<Route path="/test" exact
strict render={
//
() => {
//
return (<Home />)
//
}
//} />
//<Route path="/about" exact
strict render={
//
() => {
//
return (<h1>Welcome About</h1>)
//
}
//} />
*/
home.JSX
import React, { Component } from 'react';
class Home extends Component {
state = {
name: "Suresh"
};
render() {
return (
<React.Fragment>
<h2>Sidebar
of {this.state.name}</h2>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Scroll down the page to see the result.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.</p>
</React.Fragment>
);
}
}
export default Home;
contact.JSX
import React from 'react';
class Contact extends
React.Component {
constructor(props) {
super(props);
this.state = {
user: 'AShwin'
}
}
render() {
//console.log(this.props)
return (
<h1>Hi, I am contact us page.</h1>
);
}
}
export default Contact;
user.JSX
import React from 'react';
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
user: 'AShwin'
}
}
render() {
//console.log(this.props)
return (
<h1>{this.props.user}</h1>
);
}
}
export default User;
