react-router how do I use redirectLocation or the 301 or 302 status

Question

We are about to deploy our site in reactjs and we have (re)moved one url but merged it in our main page so from /[product]/menu we merged it to /[product]. Now they said I should respond with 301 for /[product]/menu and redirect it to /[product], how do I accomplish that and some other pages as well?

How do I setup 301 redirects using react-router? Where do I setup what pages needs to be redirected to what other pages? I have my setup like this right now:

app.get('*', (req, res) => {
  // routes is our object of React routes defined above
  match({ routes, location: req.url }, (err, redirectLocation, props) => {
    console.log(redirectLocation);
    if (err) { // something went badly wrong, so 500 with a message
      res.status(500).send(err.message);

    // HERE: HOW DO I USE THIS?
    } else if (redirectLocation) { // we matched a ReactRouter redirect, so redirect from the server
      console.log('301/302 yeah!');
      res.redirect(301, redirectLocation.pathname + redirectLocation.search);

...

I use reactjs and express as well.

Edit Added route config.

const routes = {
  path: '',
  component: AppComponent,
  childRoutes: [{
    path: '/products',
    component: ProductsComponent,
    name: 'products'
  }, {
    path: '/:slug',
    component: ProductComponent,
    name: 'product'
  }]
}

Just in case. Added answer here:

const routes = {
  path: '',
  component: AppComponent,
  childRoutes: [{
    path: '/products',
    component: ProductsComponent,
    name: 'products'
  }, {
    path: '/:slug',
    component: ProductComponent,
    name: 'product'
  }, { 
    path: '/:product/menu', onEnter(nextState, replace) { replace(`/${nextState.params.product}`) }
  }, {
    path: '/oldlink/:testId', onEnter(nextState, replace) { replace({pathname: `http://newsite.com/oldlink/some/${nextState.params.testId}`}) }
  }]
}

Stelmach

Answer 1

In the routes declaration, use <Redirect>. Example Here

Chainplate

Thanks! If I have this setup how do I translate it to that example you gave? Updated my question to reflect my routes config. – Stelmach

I can see you post the solution. Good Job! – Chainplate

Thanks! Quick question again. How do I do an absolute path? It's saying Warning: A path must be pathname + search + hash only, not a fully qualified URL like when I write absolute path on replace. – Stelmach

Sorry jumped into asking already. Haha! Found the solution. Updating question just in case anyone bumps into this as well. – Stelmach

@Stelmach Be sure to include the 301 status in the redirect tag. It defaults to 302. EG <Redirect status={301} from="..." to="..." /> – Aliaalias

@Aliaalias what does adding the status in the Redirect tag give you? It doesn't get passed to redirectLocation or renderProps. I'm trying to find out how to choose between 301 and 302. I was hoping to use that trick but not finding any use for it :( – Kortneykoruna

Since the accepted answer link is broken I want to note that when you're providing links to github, you can press "Y" and get the hash link for that file. Here's the relevant information github.com/ReactTraining/react-router/blob/…. But to answer the question of 3xx redirects, that is completely determined by your server. The router will provide you a url within the context object which you can then decide what status code to use within your app as seen in my example link. – Webster

Answer 2

In the routes declaration use <Navigate.

Redirect is replaced by Navigate in the latest version of react router dom.

Example

<Route path="/services/mobile-app-development" 
   element={<Navigate to="/our-services/mobile-app-development" 
   replace /> }/>

Superjacent