how to fix React Routing

Question

I create a navbar in react and I give routing to the link when I give route the page will run on URL but not open and its project will be stuck and the page was hang

I received error is

No routes matched location "/"

---

This is my navbar code of my react app

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Table from "./Table";

function Navbar(props) {
    return (
        <Router>
            <nav className="navbar navbar-expand-lg bg-light">
                <div className="container-fluid">
                    <a className="navbar-brand">{props.title}</a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav mb-lg-0">
                            <li className="nav-item">
                                <a className="nav-link active" aria-current="page">Home</a>
                            </li>
                        </ul>
                        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                            <li className="nav-item">
                                <Link to="/Table" className="nav-link active" aria-current="page">Data</Link>
                            </li>
                        </ul>
                        <form className="d-flex" role="search">
                            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                            <button className="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>
            <Routes>
                <Route exact path="/Table" element={< Table />}></Route>
            </Routes>
        </Router>
    )
}

And this is my Table Page which I have used in the data

import React from "react";

function Table() {
    return (
        <Table striped bordered hover>
            <thead>
                <tr>
                    <th>Text No</th>
                    <th>TextArea</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Smith</td>
                </tr>
            </tbody>
        </Table>
    )
}

Answer 1

I believe the react router will try to resolve "/" first and as it's not present you're getting the error. So add the route for that to provide as default, then add a redirect - for example:

<Routes>
    <Route exact path="/"><Redirect to="/Table" /></Route>
    <Route exact path="/Table" element={< Table />}></Route>
</Routes>