How to default to a route based on a URL parameter

Question

I have a routing setup where if only 1 param is given, i.e /:id I want the router to always redirect to /:id/overview.

For example, if the user goes to /hello, I want them to be redirected to /hello/overview.

I've tried doing this like this:

<Switch>
  <Route exact path="/" component={NoParam} />
  <Redirect from="/:section" to="/:section/overview" />
  <Route exact path="/:section/:pageName" component={GeneralOverviewPage} />   
</Switch>

This causes an infinite re-render. I'm not sure how to achieve this redirect, and would really appreciate any help. Thanks.

EDIT=======

Now trying to do it like this:

const GeneralOverviewPage: FC<RouteComponentProps<GeneralOverviewPageProps>> = (
  props
) => {
  console.log(props);
  return !props.match.params.pageName ? (
    <Redirect to={props.match.params.section + '/overview'} />
  ) : (
    <h1>{props.match.params.pageName}</h1>
  );
};

export default GeneralOverviewPage;

and

<Route path="/:section" component={GeneralOverviewPage} />
      <Route path="/:section/:pageName" component={GeneralOverviewPage} />

This means that /hello is now redirecting to /hello/hello/overview....

Not an expert on React so forgive me if I'm wrong, but wouldn't you want to add the exact keyword to the Redirect? — Saddy, Oct 01 '20 at 12:56
Hi guys, I want to programmatically use the section that is passed to the route — Raph117, Oct 01 '20 at 12:59
@Daniel, I've tried something else (I'll edit the og post) but still not working — Raph117, Oct 01 '20 at 12:59

score 0 · Answer 1 · answered Oct 01 '20 at 13:01

0

Your <Redirect from="/:section" to="/:section/overview" /> must be inside GeneralOverviewPage component.

if(!pageName){
  return (<Redirect from="/:section" to="/:section/overview" />);
}

answered Oct 01 '20 at 13:01

LonelySpirit

68
3

This unfortunately is redirecting me to :section/overview – Raph117 Oct 01 '20 at 13:03
@Raph117 you wont have two attributes in your route? Than use next pattern : '/section/:section/page/:pageName' And your url must be as test.com/section/sectionKey/page/page1. Make correct split. – LonelySpirit Oct 01 '20 at 13:08

score 0 · Accepted Answer · answered Oct 01 '20 at 13:03

0

This will Help You around for understanding!

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom'

const App = () => {

    return (
        <Switch>
            <Route exact path="/" render={
                () => console.log("Hi")
            } />
            <Redirect exact from="/:section" to="/:section/overview" render={
                () => console.log("Hi 1")
            } />
            <Route exact path="/:section/:pageName" render={
                () => console.log("Hi 2")
            } />
        </Switch>
    )
}

export default App;

answered Oct 01 '20 at 13:03

Veno

433
2
14

This is now working for me, and I have precisely 0 understanding of how, since it's what I did in the first place. Anyway thank you! – Raph117 Oct 01 '20 at 13:08
Go through this for more info [Reference](https://stackoverflow.com/questions/49162311/react-difference-between-route-exact-path-and-route-path) – Veno Oct 01 '20 at 13:09

How to default to a route based on a URL parameter

2 Answers2