CODEWITHSUNDEEP
reactjsroutesreact-routerreact-router-dom
Brute
Brute

Reputation: 141

Why is the routing not working in react.js?

I know this very basic question and yes I have looked up Google before posting it here. The solutions usually are some typo, missing the "exact" key word, not wrapping in BrowserRouter, not import something. But none of it is applicable in my case. It is probably something small but I can't figure it and is driving me a bit against the wall here.

The postJournal route doesn't work. I see it the URL but it doesn't take me to the page. The funny thing is that it worked perfectly fine and I added some other routes with /:id and since then it has stopped working.

The routes are:

import React from "react";
import "./style/App.css";
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Router, Route } from "react-router-dom";
import HomePage from "./components/homePage"
import PostJournalEntry from "./components/postJournalEntry"
import DataByID from "./components/dataById"

function App() {
  return (
    <div className="app">
      <BrowserRouter>
      <Switch>
      <Route path="/:id" exact component = {HomePage}/>
      <Route path="/:id" exact component = {DataByID}/>
      <Route path="/postJournal" exact component = {PostJournalEntry}></Route>
      <Route path="/" exact component = {HomePage}/>
      </Switch>
      </BrowserRouter>
    </div>
  );
}

--

import React, { useState, useEffect, usePrevious } from "react";
import { Link, useParams } from "react-router-dom";
import Axios from "axios";
import HomePageListItems from "./homePageListItems";
import DataById from "./dataById";

export default function HomePage(props){

    const [getAllData, setGetAllData] = useState()
    const getData =async () => {
      await  Axios.get("http://localhost:5000/get").then((response)=>{
        setGetAllData(response.data)
        })
        .catch((error)=>{console.log(error)})
    }
    useEffect(()=>{
        getData();
      },[])
    return(
        <section>
          <Link to="/postJournal">Post Journal Entry</Link>
            {getAllData&&getAllData.map((item)=>{
                return(
                    <HomePageListItems
                    key={item.id}
                    idx={item.id}
                    name={item.name}
                    title={item.title}
                    journalEntry={item.journalEntry}
                    date={item.date}
                    file={item.file}
                    />
                )
            })
            
        }
         {usePrevious}
        <DataById/>
        </section>
        
    )
}

Thanks in advance people! Any help is appreciated

Upvotes: 0

Views: 294

Answers (1)

Trung Hieu Nguyen
Trung Hieu Nguyen

Reputation: 354

The problem in your code is the order:

<Route path="/:id" exact component = {HomePage}/>
<Route path="/:id" exact component = {DataByID}/>
<Route path="/postJournal" exact component = {PostJournalEntry}></Route>

If you write these routes in that order, your /postJournal will never be reached because /postJournal will be matched as /:id. Just change the order, move /postJournal to the first and everything will work

Upvotes: 2

Related Questions