CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Minenhle Solson Cele
Minenhle Solson Cele

Reputation: 81

react-router-dom "No match 404" get rendered when going to a path with "useParams"

I am using the react-router-dom No Match404 and It works fine But When going to a path a with useParams it renders the 404 page heres the Code:

{/* Here it works fine it renders the routes */}
<Route path='/' exact component={Home} />
<Route path='/help' component={Help} /> 
<Route path='/signup' component={Signup} />

{/* The 404 page that render when a path does not exists */}
<Route component={Page404} />

{/* but when I try to render the route with useParams which is the uid I get from firebase it just render the Page404 */}
<Route path='/user/:uid' component={Profile} />

{/*-----------------Profile page------------------------*/}
// heres the profile page that uses useParams

import { useParams} from 'react-router-dom'
import {auth} from './firebase/config'

function Profile() {

  let { uid } = useParams();

  // here I have a variable that get a signed in user Unique Id from firebase 

  const [userId, setUserId] = useState('') 
  auth.onAuthStateChanged((user) => {
  if (user) {
    // User logged in already or has just logged in.
    setUserId(user.uid);
  } else {
    // User not logged in or has just logged out.
  }
 });

if (uid === userId ) {
  return <div>This is your profile</div>
}else{
  return <div>This is someone elses or it does not exist</div> 
}


}

This code works well when I remove the 404 Route but when I put it, the Profile route render the 404 page.

is there a way to have 404 page but only renders when the route actually does not exist.

Upvotes: 0

Views: 2008

Answers (4)

aris suryono
aris suryono

Reputation: 1

assuming that you have another block ex. <Layout>, make sure you don't put any block between <Switch> and <Route>

<Switch>
    <Layout>
        <Route exact path="/" component={Hello} />
        <Route component={NotFound} />
    </Layout>
</Switch>

into

<Layout>
    <Switch>
        <Route exact path="/" component={Hello} />
        <Route component={NotFound} />
    </Switch>
</Layout>

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 203418

Assuming you've rendered your routes into a Switch component then you need to keep in mind that when exclusively matching/rendering routes that route path order and specificity matters! This is because the Switch component matches and renders the first child <Route> or <Redirect> that matches the location.

Switch

<Switch> is unique in that it renders a route exclusively. In contrast, every <Route> that matches the location renders inclusively.

If you list your less specific paths first they will be matched and rendered. You should order the paths in inverse order of specificity. If done correctly there is nearly* a 0% use case for needing the exact prop (it's more useful when inclusively matching routes within a router).

<Switch>
  <Route path='/user/:uid' component={Profile} />
  <Route path='/help' component={Help} /> 
  <Route path='/signup' component={Signup} />
  <Route path='/' exact component={Home} /> // *
  <Route component={Page404} />
</Switch>

* exact prop used on the home "/" path to keep it from matching any other non-homepage component.

Upvotes: 0

Taghi Khavari
Taghi Khavari

Reputation: 6582

when you have a general path like 404 for example here, you have to add exact prop to your other routes to make them more specific.

like this:

{/* but when I try to render the route with useParams which is the uid I get from firebase it just render the Page404 */}
<Route exact path='/user/:uid' component={Profile} />

{/* The 404 page that render when a path does not exists */}
<Route component={Page404} />

Upvotes: 1

Nirav
Nirav

Reputation: 81

Check This No Match (404)

or you can you implement like this

This means if the routes above haven’t matched, the only possible solution is we’ve hit a route that doesn’t actually exist.

<Router>
  <Switch>
    <Route exact path="/" component={Hello} />
    <Route component={NotFound} />
  </Switch>
</Router>

Upvotes: 0

Related Questions