We Keep Coding

Login page and NavBar formatted with Reactstrap (Vertical and with custom background and text color)

I'm trying to make a login page , which would let me access me to the main site with displays a NavBar. I'm using ReactStrap, and I can't find the way of making the NavBar vertical instead of horizontal, neither setting the background and text colours and images. I could achieve to make a conditional rendering (to let administrator users to access some funcionalities like adding products, other users, and make puchrases, while sellers users are only allowed to make sales and view the sales registers).
Here's my code:
App.js:
import React from 'react';
import "./bootstrap.app.css";
import { BrowserRouter as Router, Route} from "react-router-dom";
import Example from "./componentes/navbar.componente"
import RegistroVentas from "./componentes/registro-ventas.componente";
import EditarVenta from "./componentes/editar-venta.componente";
import VenderProducto from "./componentes/realizar-venta.componente";
import NuevoUsuario from "./componentes/nuevo-usuario.componente";
import NuevoProducto from "./componentes/nuevo-producto.componente";
import ComprarProducto from "./componentes/realizar-compra.componente";
function App() {
return (
<Router>
<div className="container">
<Example />
<br/>
<Route path="/" exact component={RegistroVentas} />
<Route path="/registroVentas" component={RegistroVentas} />
<Route path="/editar/:id" component={EditarVenta} />
<Route path="/venta" component={VenderProducto} />
<Route path="/nuevoUsuario" component={NuevoUsuario} />
<Route path="/nuevoProducto" component={NuevoProducto} />
<Route path="/compra" component={ComprarProducto} />
</div>
</Router>
);
}
export default App;
navbar.js:
import React from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
Badge,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem } from 'reactstrap';
//import FontAwesome from '#fortawesome/react-fontawesome';
//import 'Ventas' from './ventas-cod'
class Ventas extends React.Component {
render() {
return(
<NavItem>
<NavLink href="/venta">
<Badge pill color="dark">Venta</Badge>
</NavLink>
</NavItem>
);
}
}
class Compra extends React.Component {
render() {
return(
<NavItem>
<NavLink href="/compra">
<Badge pill color="dark">Compra</Badge>
</NavLink>
</NavItem>
);
}
}
class Altas extends React.Component {
render () {
return(
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
<Badge pill color="dark">Altas</Badge>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<NavLink href="/nuevoUsuario">
<Badge pill color="dark">Usuario</Badge>
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink href="/nuevoProducto">
<Badge pill color="dark">Producto</Badge>
</NavLink>
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
);
}
}
export default class Example extends React.Component {
constructor(props) {
super(props);
this.tipoUsuario='administrador';
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="green" expand="lg">
<NavbarBrand href="/">Supermercado Caplan</NavbarBrand>
<NavbarToggler vertical className="d-flex" onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="d-flex ml-auto" >
<Ventas />
{this.tipoUsuario=='administrador' ?
<Compra /> : <a></a>
}
{this.tipoUsuario=='administrador' ?
<Altas /> : <a></a>
}
</Nav>
</Collapse>
</Navbar>
</div>lt
);
}
}
Here's what I'm getting:
Here's something I would like to get:
Does anyone have an idea of what should I do?
Thank's a lot!

In Reactstrap, there's no such a thing like a native component called Sidebar.
However, it's possible to download a template with a sidebar implemented, and then wrap the whole application into it.
For the login cuestion, there's a lot of examples on the web. While all of them should work correctly if implemented properly, I've chosen one of the simplest I found, which works fine for the kind of project I'm doing. However, while it allows me to login with my credentials into a local deployment, it isn't probably the best solution for an application deployed into a web service, since the security of the system it's not just a big deal for an app which is running into a local machine, just written for academic purposes.
So then, here's the template I've found for the Reactstrap sidebar and the login method in which I've based on to implement in my app, and also my app with both things implemented.
Sidebar template:
https://codesandbox.io/s/5ku6t
Login method used:
https://contactmentor.com/login-form-react-js-code/
App with login and sidebar implemented:
https://gitlab.com/leandrocaplan/supermercado-caplan-final-programacion-iii-inspt-utn
(See the frontend folder to see the implementation)
Notice that in my app, the way I've found to format the sidebar, and also the topbar, is creating my own CSS classes, and apply them into the sidebar and topbar components. These classes are found in the App.css file at the correspondent frontend directory.

Why wont my create-react-app content center?

I used create-react-app and have been playing around with it. I understand the "app" class is supposed to center the content, and it did when I barely anything. But now it isn't doing that. Can someone tell me where I'm going wrong?
App.js
import React from "react";
import './App.css';
import { Route, BrowserRouter as Router } from "react-router-dom";
import Home from "./pages/home";
import About from "./pages/about";
function App() {
return (
<div className="app">
<Router>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
</Router>
</div>
);
}
export default App;
about.js
import React from "react";
import { Button, Breadcrumb, Card } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css'
function About() {
return (
<div className="app">
<h1>ABOUT PAGE</h1>
<a href="/">
<img src="https://www.searchpng.com/wp-content/uploads/2019/02/Back-Arrow-Icon-PNG-715x715.png" height="50px" />
</a>
<Card className="mb-3" style={{ color: "#000"}}>
<Card.Img/>
<Card.Body>
<Card.Title>
Card Example
</Card.Title>
<Card.Text>
This is an example of react bootstrap cards
</Card.Text>
</Card.Body>
</Card>
<Breadcrumb>
<Breadcrumb.Item>Test</Breadcrumb.Item>
<Breadcrumb.Item>Test 2</Breadcrumb.Item>
<Breadcrumb.Item>Test 3</Breadcrumb.Item>
</Breadcrumb>
<Button variant="success">Test Button</Button>
</div>
)
}
export default About;

In create-react-app, there is a file App.css with class .App:
.App {
text-align: center;
}
If you'd like to use it, you will have to use capitalized name of the class, since that's how it is defined in css file.

ReactJS Bootstrap Navbar and Routing not working together

I am trying to create a simple Webapp using ReactJS, and I wanted to use the Navbar provided by React-Bootstrap.
I created a Navigation.js file containing a class Navigation to separate the Navbar and the Routing from the App.js file. However, both parts do not seem to work. When I load the page, it is just empty, there is no Navbar. Can anyone spot a mistake?
Navigation.js:
import React, { Component } from 'react';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
import { Switch, Route } from 'react-router-dom';
import { Home } from './Page';
class Navigation extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link href="/">Home</Nav.Link>
</NavItem>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
</div>
);
}
}
export default Navigation;
App.js:
import React, { Component } from 'react';
import Navigation from './components/routing/Navigation';
class App extends Component {
render() {
return (
<div id="App">
<Navigation />
</div>
);
}
}
export default App;
I tried using a NavItem containing a LinkContainer from react-router-bootstrap already, which led to the same result.
Just for completeness, Page.js:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
export const Page = ({ title }) => (
<div className="App">
<div className="App-header">
<h2>{title}</h2>
</div>
<p className="App-intro">
This is the {title} page.
</p>
<p>
<Link to="/">Home</Link>
</p>
<p>
<Link to="/about">About</Link>
</p>
<p>
<Link to="/settings">Settings</Link>
</p>
</div>
);
export const About = (props) => (
<Page title="About"/>
);
export const Settings = (props) => (
<Page title="Settings"/>
);
export const Home = (props) => (
<Page title="Home"/>
);

First of all, in your snippets it doesn't seem like you're wrapping your code in a Router, so you should make sure that you're doing that inside App or in ReactDOM.render:
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
rootElement
);
Next, your specific problem is that you're rendering react-bootstrap's Nav.Link instead of react-router's Link component, so the router is not picking up your route changes. Fortunately, react-bootstrap provides a render prop in most of its components to specify which component or element you want to render if you don't want the default. Switch to something like this:
import { Switch, Route, Link } from 'react-router-dom';
class Navigation extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link as={Link} to="/" >Home</Nav.Link>
</NavItem>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
</div>
);
}
}

For those who have a problem with styling Link component from react-router-dom in react-bootstrap navbar, simply add className="nav-link", like this:
<Link to="/" className="nav-link">Home</Link>
instead of
<Nav.Link href="/">Home</Nav.Link>

I hope I'm no late to help some other people trying to solve this.
You can use the NavLink, instead of as={Link}. It will render with the same behavior of Link, but will "watch" the router URL to define which link is indeed active:
<Nav defaultActiveKey="/bills" as="ul">
<Nav.Item as="li">
<Nav.Link as={NavLink} to="/bills">Dividas</Nav.Link>
</Nav.Item>
<Nav.Item as="li">
<Nav.Link as={NavLink} to="/other">Em construção</Nav.Link>
</Nav.Item>
</Nav>

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
and Navbar.js:
import React from 'react';
import {Container,Navbar,Nav,NavItem } from 'react-bootstrap';
import {Link} from 'react-router-dom';
<Nav className="ml-auto">
<NavItem> <Link className="nav-link" to="/">Home</Link> </NavItem>
<NavItem> <Link className="nav-link" to="/about">About</Link> </NavItem>
<NavItem> <Link className="nav-link" to="/contact">Contact</Link> </NavItem>
</Nav>
This resolved the: <Link> outside a <Router> error for me.

Having found myself with a project of non-trivial size, and one that already had jQuery as a dependency I was able to gracefully solve the react-router / react-bootstrap mismatch with an event listener on the document.
This has one advantage over other solutions in that it requires no changes to the current markup. However, one may need to write some additional logic guarding the history.push call depending on needs. One may also need to expand this to guard for the target attribute, e.g. target="_blank".
If jQuery is not desired, one may be able to write a vanilla JS implementation with document.addEventListener without much additional effort.
// react-router#5
// usage of history may vary depending on version
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
// IIFE scoping jQuery for us
(($) => {
// Wait for document ready
$(() => {
$(document).on('click', '[href]', (event) => {
// Only target links targeting our application's origin
if (event.currentTarget.href.indexOf(window.location.origin) === 0) {
// Prevent standard browser navigation
event.preventDefault();
const path = event.currentTarget.href.slice(window.location.origin.length);
history.push(path);
}
});
});
})(jQuery);
const Routing = (props) => (
<Router history={ history }>
...
</Router>
);

Currently, with react v18 and react-router v6.4, the approach is working for me is a bit different.
To make the links properly work with react-route use as={Link} in the Nav.Link item.
And to make the tabs highlight you need to use eventKey as described in the documentation: EventKey is used to determine and control the active state of the parent Nav
Here is an example.
Notice that the changes also affect the Navbar.Brand component.
import { Link, useLocation } from 'react-router-dom';
const AppNavbar = () => {
const location = useLocation();
const activeKey = location.pathname === '/' ? '/projects' : location.pathname;
return (
<Navbar expand="lg" className="theme-navbar">
<Container>
<Navbar.Brand as={Link} to="/">
My Projects
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav activeKey={activeKey} className="me-auto">
<Nav.Link as={Link} eventKey="/projects" to="/projects">
Projects
</Nav.Link>
<Nav.Link as={Link} eventKey="/work" to="/work">
Ongoing Tasks
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};

i think you forgot to include bootstrap css, refer to the stylesheets section of the following doc
https://react-bootstrap.github.io/getting-started/introduction/
or just add the following to ur index.html
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>

Redirecting to another component on item click - not working

I am using react-sidenav package to navigate around different components based on what's clicked. However, this is not working when I try implementing this functionality. Here is my SideNav component:
import React from 'react';
import SideNav, { Nav, NavIcon, NavText } from 'react-sidenav';
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
//specify the base color/background of the parent container if needed
const MySideNav = () => {
return (
<div style={{background: '#2c3e50', color: '#FFF', width: 200}}>
<SideNav highlightColor='#E91E63' highlightBgColor='#00bcd4' defaultSelected='pos' onItemSelection={ (id, parent) => {
<Router>
<Redirect push to={`/${id}`} />
</Router>
}}>
<Nav id='home'>
<NavText>Home</NavText>
</Nav>
<Nav id='about'>
<NavText>About</NavText>
</Nav>
</SideNav>
</div>
)
}
export default MySideNav;
I also have this in Routes.js file, which I render in App.js:
<main>
<Switch>
<Route exact path="/home" component={Home} />
<Route path="/about" exact component={About} />
</Switch>
</main>
Then I have separate About.js and Home.js components, which I have already imported in Routes.js. When I click individual items in the sidebar, I am not able to redirect to any other components.
I can't figure out where I am going wrong since I am a beginner in React. Could someone please assist me with this? That would be much appreciated!
UPDATE
When using withRR4, the redirection is being done in the url bar, but the target components are not being rendered. Here's is my code for this:
import React from 'react';
import { Nav, withRR4 , NavIcon, NavText } from 'react-sidenav';
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
const SideNav = withRR4();
//specify the base color/background of the parent container if needed
const MySideNav = () => {
return (
<div style={{background: '#2c3e50', color: '#FFF', width: 200}}>
<Router>
<SideNav highlightColor='#E91E63' highlightBgColor='#00bcd4'>
<Nav id='home'>
<NavText>Home</NavText>
</Nav>
<Nav id='about'>
<NavText>About</NavText>
</Nav>
</SideNav>
</div>
)
}
export default MySideNav;

You need to use withRR4 as explained in the Docs here:
https://www.npmjs.com/package/react-sidenav#react-router-4-integration
EDIT
You need to import the <Route/> 's you want to use inside the <Router />
import React from 'react';
import { withRR4, Nav, NavText } from 'react-sidenav';
import { BrowserRouter as Router, Route } from 'react-router-dom';
const SideNav = withRR4();
class MySideNav extends React.Component {
renderHome = () => {
return <div>Home</div>;
};
renderAbout = () => {
return <div>About</div>;
};
render() {
return (
<Router>
<div style={{ background: '#2c3e50', color: '#FFF', width: 200 }}>
<SideNav default='home' highlightColor='#E91E63' highlightBgColor='#00bcd4'>
<Nav id='home'>
<NavText> Home </NavText>
</Nav>
<Nav id='about'>
<NavText> About </NavText>
</Nav>
</SideNav>
</div>
<div style={{ padding: 20 }}>
<Route exact path="/" render={this.renderHome}/>
<Route path="/home" render={this.renderHome}/>
<Route path="/about" render={this.renderAbout}/>
</div>
</Router>
);
}
}
I am not 100% if you must put these Routes here, can you test it out for me?

React routings-url changes. but doesn't render components. when refresh the page it renders perfectly

This is a famouse problem in react routings. but i have not any solution since last two weeks.this one is big problem and i hope any answer for this cordially. I have three components such as Admin.js, AdminReview.js and AdminDashboard.js as below.
There is my index.js file.
index.js
<Provider store={store}>
<BrowserRouter basename="/">
<App/>
</BrowserRouter>
</Provider>
Admin.js file is located at App.js file.There is Admin.js and it have routings.
Admin.js
return(
<div>
<BackdropLoading show={this.props.result} />
<Switch>
<Route path="/interactions" component={AdminReview} />
<Route path="/" exact component={AdminDashbord} />
</Switch>
</div>
)
I used redux in my Admin.js file as below.
export default connect(mapStateToProps, mapDispatchToProps)( Admin);
AdminReview.js and AdminDashboard.js are normal files but there are used redux as below.
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminReview));
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminDashbord));
withRouter is higher order component and it import using
react-router-dom
for prevent the block updates according to the react documentation.
I used navbar to navigate to above routes.this is my AdminNavbar.js file.
AdminNavbar.js
<form className="form-inline my-2 my-lg-0">
<ul className="navbar-nav" style={{float: 'right',marginBottom:'-10px'}}>
<li id="reviewId" className="nav-item" style={liStyle}>
<Link to="/interactions" onClick={this.reviewClick}
className="nav-link js-scroll-trigger"
style={linkStyle}>
<small>Interactions</small>
</Link>
</li>
<li id="reportId" className="nav-item"
style={{cursor: 'pointer', float: 'right', borderBottom: '1px solid transparent'}}>
<Link to="/report" onClick={this.reportClick}
className="nav-link js-scroll-trigger"
style={linkStyle}>
<small>Reports</small>
</Link>
</li>
<li className="nav-item"
style={{cursor: 'pointer', float: 'right', paddingTop: '7px'}}>
<img src={dollerIcon} alt="icon" style={{width:'20px'}}/>
</li>
<li id="dashbordId" className="nav-item" style={{
cursor: 'pointer',
float: 'right',
borderBottom: '1px solid transparent',
paddingTop: '2%'
}}>
<ProfileDropdown user="admin"/>
</li>
</ul>
</form>
AdminNavbar also used the redux as below.
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminNavbar));
i'm reading currently more articles related this, but i can't fix this issue.please anyone can help solve this?

After long testing, me and my friend finally found the solution for this. if we talk about our component structure, it as below.
index.js
<Provider store={store}>
<BrowserRouter basename="/">
<App/>
</BrowserRouter>
App.js
<div>
<MainLayout/>
</div>
MainLayout.js
<div>
<AdminLayout/>
</div>
AdminLayout.js
<div>
<BackdropLoading show={this.props.result} />
<Switch>
<Route path="/interactions" component={AdminReview} />
<Route path="/" exact component={AdminDashbord} />
</Switch>
</div>
i use the connect of react redux in MainLayout.js,AdminLayout.js and AdminReview.js and AdminDashboard.js
so i wrapped those with withRouter hoc of
react-router-dom
it was wrong. we should wrap only the route used components. such as AdminLayout.js. but there is problem, becuase the child components should not be received props because the MainLayout.js also use the connect. so finally i also wrapped the MainLayout.js from withRouter.now i wrapped two component from withRouter such as AdminLayout.js and MainLayout.js. then the routings work perfectly.