CODEWITHSUNDEEP
javascriptreactjsreact-router-v4
Wim V.
Wim V.

Reputation: 31

React Router redirects to wrong page

I'm building a single page application with React and React Router.

Whenever I'm on a page, for example "/banners" and I go to "/banners/edit/1234" everything works as expected. But when I use my browser buttons to go back to "/banners" I get redirected to "/". The same things happens when I use this.props.history.goBack();. It first redirects to the previous page and then immediately redirects to /.

How can I get the user to go to "/banner" or the previous page? Or is this not possible with React Router? Or does anyone has a suggestion where to look?

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom'
import { PropsRoute } from 'react-router-with-props';
import Grid from '@material-ui/core/Grid';

import Content from './content.js';
import Edit from './edit.js';
import NotFound from './notfound.js';
import New from './new.js';

class Main extends Component {
  render() {
    return(
      <Grid container justify="center">
        <main>
          <Switch>
            <Route exact path="/:type" render={(props) => <Content {...props} tabs={this.props.data} />} />
            <Route exact path="/edit/:type/:id" component={Edit} />
            <Route exact path="/:type/new" component={New} />
            <Redirect exact from="/" to={"/"+this.props.data[0].toLowerCase()} />
            <Route component={NotFound} />
          </Switch>
        </main>
      </Grid>
    )
  }
}

export default Main

Upvotes: 2

Views: 2129

Answers (1)

Wim V.
Wim V.

Reputation: 31

For anyway reading this question.

Alright, so the problem did not seem to be the fault of React-Router. Somewhere in my code I checked the route with an array of allowed routes. For some reason this redirected wrongly. So that explains the redirects.

Upvotes: 1

Related Questions