CODEWITHSUNDEEP
reactjsreact-router-dom
James
James

Reputation: 449

Why is react-router-dom v6 only rendering my landing page?

I know several questions have been asked relating to this, but none capture what I am experiencing so here it goes...

My app loads fine and my landing page is rendering as expected. The weird piece is that none of the other routes are loading. I have a react-router-dom Link on the Landing component that directs to school but nothing happens, no console errors, just the Landing component still rendering. When I manually type any other route in the browser, still nothing happens, just the Landing pages rendering.

It doesn't matter what component is set to the / route, it renders fine but something is definitely up with the react-router-dom.

Here's my index.js

import { render } from 'react-dom';
import App from './components/app/App';
import './index.scss';

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

App.js

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import Content from '/components/Content';
import Nav from '../nav/Nav';
import Home from '../../pages/home/Home';
import PageFooter from '../footer/PageFooter';
import Search from '../../pages/search/Search';
import Course from '../../pages/course/Course';
import Landing from '../../pages/landing/Landing';

export default function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <Nav />
                <Content className="main-wrapper" fullWidth>
                    <Routes>
                        <Route path="/" element={<Landing />} />
                        <Route path="school" element={<Home />} />
                        <Route path="search" element={<Search />} />
                        <Route path="courses">
                            <Route path=":courseId" element={<Course />} />
                            <Route
                                index
                                element={<Navigate replace to="/" />}
                            />
                        </Route>
                    </Routes>
                </Content>
                <PageFooter />
            </BrowserRouter>
        </div>
    );
}

I am absolutely beside myself - what am I doing wrong?

Upvotes: 0

Views: 331

Answers (1)

James
James

Reputation: 449

As it usually goes, this was my error. After ripping it all out, starting with a fresh CRA app, and piecing my project back together, I found that in the <Nav /> component I had an inappropriate math operator (= instead of ===) going on within a useLocation reference 🤦🏽

Upvotes: 1

Related Questions