CODEWITHSUNDEEP
reactjs
gourav kumar
gourav kumar

Reputation: 155

how to fix React Routing

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>
    )
}

Upvotes: 3

Views: 98

Answers (4)

Madhav
Madhav

Reputation: 41

You are trying to access the route that is not availble. / is not available there.

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

In the above, You have no route named /.

Upvotes: 1

Louis Lecouturier
Louis Lecouturier

Reputation: 408

You haven't created any index route for the path "/" So basically if you are on localhost:3000, your app doesn't know what to render at the url "http://localhost:3000/"

Just add a <Route exact path="/" element={<SomeComponent/>}/> in your Router...

Else to show your Table, just go to "http://localhost:3000/Table" and it should work properly ;)

Upvotes: 0

Sujith Sandeep
Sujith Sandeep

Reputation: 1249

The issue is you don't have any route for / and you are trying to access it. It is always suggested to have a base /. Since use always tries to access it.

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

See whether the below link is useful for your react-router-dom configuration,

https://stackoverflow.com/a/72799262/12467993

Upvotes: 0

seniorcreative
seniorcreative

Reputation: 145

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>

Upvotes: 2

Related Questions