React Bootstrap Navbar Routing

Question

I am new to react and I am trying to create a simple navigation with bootstrap and routing using navbar. Though the URL changes, the UI of the page is not rendered. Here is my code

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import admin from './admin';
import App from './App';
import reportWebVitals from './reportWebVitals';
import weighbride from './weighbride';
import 'bootstrap/dist/css/bootstrap.min.css'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";


ReactDOM.render(
  <React.StrictMode>
    
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import logo from './logo.svg';
import React from 'react'
import './App.css';
import Header from './header'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Weighbridge from './weighbride'
import Admin from './admin'

class App extends React.Component{
  render()
  {
    return(

      <div className='App'>
       
        <Router>
        <Header/>
        <Routes>
          <Route exact path="/" component={App} />
          <Route path="/weighbridge" component={Weighbridge} />
          <Route path="/admin" component={Admin} />
          
        </Routes>
        </Router>

      </div>
      
    )
  }
}

export default App;

Admin.js

import React from 'react'
import "bootstrap/dist/css/bootstrap.min.css";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

class Admin extends React.Component
{
    render()
    {
        return(
            <Form>
            <Form.Group className="mb-3" controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control type="email" placeholder="Enter email" />
              <Form.Text className="text-muted">
                We'll never share your email with anyone else.
              </Form.Text>
            </Form.Group>
          
            <Form.Group className="mb-3" controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control type="password" placeholder="Password" />
            </Form.Group>
            <Form.Group className="mb-3" controlId="formBasicCheckbox">
              <Form.Check type="checkbox" label="Check me out" />
            </Form.Group>
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Form>

        )
    }
}


export default Admin

The URL is changing but the UI of the admin page is not rendered. Please help! I am using react bootstrap to create the navigation.

Drew Reese · Accepted Answer · 2022-03-21 08:11:36Z

1

In react-router-dom@6 the Route component API changed. Instead of using a component, or render and children function props, only a single element prop taking a ReactNode, a.k.a. JSX is used. Removed also was the exact prop as all routes are now always exactly matched using a route ranking system.

Example:

<Router>
  <Header/>
  <Routes>
    <Route path="/" element={<App />} />
    <Route path="/weighbridge" element={<Weighbridge />} />
    <Route path="/admin" element={<Admin />} />
  </Routes>
</Router>

answered Mar 21, 2022 at 8:11

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Philomath Over a year ago

Sorry, I did not understand, can you please point me to any tutorials!

Drew Reese Over a year ago

@Philomath Yes, Upgrading from v5 migration guide and specifically this section. See also Routes and Route component API.

Collectives™ on Stack Overflow

React Bootstrap Navbar Routing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related