samsonasik / ci4-react

Example Using react.js in CodeIgniter 4 application
MIT License
33 stars 15 forks source link

Add in Bootstrap template navigation state not change #1

Closed abhiPHPDev closed 3 years ago

abhiPHPDev commented 3 years ago

Hello sir, I am beginner for React JS.

I just add a Bootstrap HTML Admin template with this code. Successfully add the template, but when I want Replace Navigations from div id "Root" To "sidebar" its render but state not change when click on link.

My app.js Code is: /****/ import about from './about.js'; import createPage from './create-page.js'; import Navigation from './Navigation.js';

const { BrowserRouter, Switch, Route } = ReactRouterDOM;

const { createElement } = React;

const Main = () => createElement( "main", null, createElement( Switch, null, createElement( Route, { exact: true, path: "/", component: createPage('home', 'Home') } ), createElement( Route, { exact: true, path: "/about", component: about } ), createElement( Route, { exact: true, path: "/contact", component: createPage('contact', 'Contact') } ), createElement( Route, { exact: true, path: "*", component: createPage('404', '404 Page') } ) ) );

const Header = () => createElement( 'div', null, createElement(Navigation) );

const App = () => createElement( "div", null, // createElement(Header, null), createElement(Main, null) ); ReactDOM.render( createElement( BrowserRouter, null, createElement(Header, null) ), document.getElementById('sidebarnav') );

ReactDOM.render( createElement( BrowserRouter, null, createElement(App, null) ), document.getElementById('root') );

**Navigation bar with div ID sidebarnav.

Please suggest me what is the error or point I missed.**

samsonasik commented 3 years ago

Hi, that possibly because of multiple ReactDOM.render() that point to BrowserRouter.

You can read more about react dom from documentation https://reactjs.org/docs/react-dom.html#render