Skip to main content
Version: current

Redirects

Overview#

Redirects can be added in 2 ways. Either in a flat file (you'll need Falcon Server access for this), or, they can come from your shops API package.

Flat redirects (Enterprise Only)#

To add flat redirects you must first create a server/config/redirects.txt file. You can then add your redirects there. All redirects added to this file are treated as 301.

This file path can be configured in your server/config files. The config variable is redirectFile

{
...
"redirectFile": "config/redirects.txt" // default file path
}

1 to 1 redirect#

The format of this file should have each redirect on a new line with the orgin and destination seperated by a space.

origin destination

example

/product-1 /product-2

In this example the url /product-1 will 301 redirect to /product-2

Regex support#

We also support regex. Any entry prefixed with @ is considered regex.

example

@\/product-1$ /product-2

In this example any url that ends in /product-1 will be redirected to /product-2

Query string support#

If you want to pass query parameters accross that is also possible by assigning them to a variable using (.*)$.

Each time you use the string (.*)$ it is passed as a variable in numberical order to $1 and then $2 and so on.

example

@\/product-1(\?.*)?$ /product-2$1

In this example everything after product-1 is saved as $1 and passed to the end of the destination. e.g. https://deity.io/product-1?id=1&project=2 => https://deity.io/product-2?id=1&project=2

example 2

@^(.*)\/product-1(.*)$ $1/product-2$2

In this example everything before product-1 is set to $1 and everything after is set to $2. e.g. https://deity.io/products/product-1?id=1&project=2 => https://deity.io/products/product-2?id=1&project=2

Shop API redirects#

Redirect support is directly injected into your shops fetchUrl() method.

We check for URL matches, if none are returned we then query the shops redirect API. If a match is found we return an object:

{
path, // the location to be redirected
status // the type of redirect e.g. 301, 302, 404
}

Implementation#

To get redirects to work you'll need to make sure you have a DynamicRedirect component in your route App.js.

This uses react-router-dom to handle the redirect.

client/src/components/DynamicRedirect.js

import React from 'react';
import { Redirect } from 'react-router-dom';
export const DynamicRedirect = ({ match, location, staticContext }) => {
const { path, status = 301 } = match.params;
if (staticContext) {
staticContext.status = status;
}
return <Redirect from={location.pathname} to={path} />;
};

client/src/App.js

...
import { ..., DynamicRedirect } from './components';
...
const App = () => (
...
<SwitchDynamicURL onLoading={({ component }) => <LoaderWrapper>{component}</LoaderWrapper>}>
...
<Route exact type="redirect" component={DynamicRedirect} />
<Route component={NotFound} />
</SwitchDynamicURL>
...
)

n.b. the DynamicRedirect should be passed to the second to last Route component to allow the other routes to be rendered with a higher priority.

server/config/redirects.txt (for flat redirects)

/contact/ /contact-us/
/old-product/ /new-product/
/old-page/ /

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.

Stay up to date

Do you want to be informed when we release new features or fixes? Sign up to our newsletter to stay in the loop.