How to perform a simple Redirect in a ReactJS app

Question

I need to perform a simple redirect of URL in the following app. When the URL is https:localhost:8080/new; the app needs to redirect to https:localhost:8080/, with the URL being shown in the browser as https:localhost:8080/new. Currently, I get a 'Cannot GET /new' error message. The ReactJS code is:

import React from 'react';
import { BrowserRouter, Router, Route, Switch, Link, NavLink, Redirect } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import TabComponent from '../components/TabComponent';

export const history = createHistory();

const testText1 = () => (<div><p>asdas1</p></div>);
const testText2 = () => (<div><p>asdas2</p></div>);
const testText3 = () => (<div><p>asdas3</p></div>);

const AppRouter = () => {
  console.log('HEREEE');

  return (
    <BrowserRouter history={history}>
      <div>
        <Switch>
          <Route path="/" component={testText1} exact={true} />
          <Route path="/new" component={testText2} />
          <Redirect from="/new" to="/" push />
          <Route path="/latest" component={testText3} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default AppRouter;

when do you want to redirect ? You want to go to `/` as soon as the path is `/new` ? So don't want `testText2` to get rendered ? — Dane, Feb 06 '18 at 04:50
Ideally, I am looking for a solution where, when I go to /new, I want the URL in the browser to be displayed as /new, but the component mapped against it must be {testText1}. However, I will manage even if the component is {testText2}. Thanks. — Nishanth Reddy, Feb 06 '18 at 05:05

score 1 · Accepted Answer · answered Feb 06 '18 at 05:12

1

React Router is a declarative router. That means, you declare what (which component) to render when the browser hits a path. So you define appropriate values for path and component props of the <Route> component.

// hitting '/' and '/new' renders testText1
<Switch>
  <Route path="/" component={testText1} exact={true} />
  <Route path="/new" component={testText1} />
  <Route path="/latest" component={testText3} />
</Switch>

...and....

// hitting '/new' renders <Redirect/> which in turn renders testText1
<Switch>
  <Route path="/" component={testText1} exact={true} />
  <Route path="/new" component={() => <Redirect to='/' push/>} />
  <Route path="/latest" component={testText3} />
</Switch>

...and...

// hitting '/' renders testText1, '/new' renders testText2
<Switch>
  <Route path="/" component={testText1} exact={true} />
  <Route path="/new" component={testText2} />
  <Route path="/latest" component={testText3} />
</Switch>

answered Feb 06 '18 at 05:12

Dane

9,242
5
33
56

I tried the 2nd solution above. It isn't working. Btw, the code I've given in the question is for testing purpose, and I actually have a (hidden) component with me which I use for development purpose. I'm assuming the solution remains same for the hidden component and the dummy testText* components I supplied – Nishanth Reddy Feb 06 '18 at 05:32
how do you serve your app ? are you using create-react-app ? – Dane Feb 06 '18 at 05:41
the second solution actually works if you're serving your app right. See `Main.js` file in https://codesandbox.io/s/50oymr15px – Dane Feb 06 '18 at 05:43
I serve the app using Webpack – Nishanth Reddy Feb 06 '18 at 05:46
Then see https://stackoverflow.com/questions/44805562/how-to-configure-webpack-dev-server-with-react-router-dom-v4 and https://github.com/ReactTraining/react-router/issues/676 Basically, the dev server should serve the generated `index.html` for every path, whether it's `/new`, `/`. Otherwise, when the browser hits `/new`, it looks for a file named `new.html` – Dane Feb 06 '18 at 05:49

How to perform a simple Redirect in a ReactJS app

1 Answers1