react-router how do I use redirectLocation or the 301 or 302 status
11,870
In the routes declaration, use <Redirect>
. Example Here
Author by
index
Updated on June 05, 2022Comments
-
index about 2 years
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}`}) } }] }
-
index about 8 yearsThanks! If I have this setup how do I translate it to that example you gave? Updated my question to reflect my routes config.
-
Damien Leroux about 8 yearsI can see you post the solution. Good Job!
-
index about 8 yearsThanks! 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. -
index about 8 yearsSorry jumped into asking already. Haha! Found the solution. Updating question just in case anyone bumps into this as well.
-
SystemicPlural almost 8 years@index Be sure to include the 301 status in the redirect tag. It defaults to 302. EG <Redirect status={301} from="..." to="..." />
-
George Brassey over 7 years@SystemicPlural what does adding the status in the
Redirect
tag give you? It doesn't get passed toredirectLocation
orrenderProps
. I'm trying to find out how to choose between301
and302
. I was hoping to use that trick but not finding any use for it :( -
okcoker about 6 yearsSince 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 thecontext
object which you can then decide what status code to use within your app as seen in my example link.