/Javascript/React/Add Navbar to React Redux CRUD App

Add Navbar to React Redux CRUD App

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

import AddTutorial from "./components/add-tutorial.component";
import Tutorial from "./components/tutorial.component";
import TutorialsList from "./components/tutorials-list.component";

class App extends Component {
  render() {
    return (
      <Router>
        <nav className="navbar navbar-expand navbar-dark bg-dark">
          <Link to={"/tutorials"} className="navbar-brand">
            bezKoder
          </Link>
          <div className="navbar-nav mr-auto">
            <li className="nav-item">
              <Link to={"/tutorials"} className="nav-link">
                Tutorials
              </Link>
            </li>
            <li className="nav-item">
              <Link to={"/add"} className="nav-link">
                Add
              </Link>
            </li>
          </div>
        </nav>

        <div className="container mt-3">
          <Switch>
            <Route exact path={["/", "/tutorials"]} component={TutorialsList} />
            <Route exact path="/add" component={AddTutorial} />
            <Route path="/tutorials/:id" component={Tutorial} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Source: bezkoder.com

Similar codes

3 votes331 views1 answer
React router yarn
Javascript React
40 votes294 views5 answers
Fetch react
Javascript React
4 votes278 views2 answers
React hooks useref is called in function which is neither a react function component
Javascript React
0 vote256 views1 answer
Create react app ssl
Javascript React
0 vote315 views1 answer
Reset navigation to specific tab react-navigation
Javascript React
0 vote305 views3 answers
How to copy an arry react
Javascript React
9 votes273 views5 answers
How to add array data on state react
Javascript React
0 vote402 views1 answer
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').
Javascript React
0 vote322 views1 answer
How to replace strings with react components
Javascript React
0 vote299 views1 answer
How to go specific content in react single page by id
Javascript React