Nested Switches and Default Subroutes with React Router 4

Question

I keep getting the warning Warning: You tried to redirect to the same route you're currently on when trying to navigate to /articles/<article_id>/details.

I currently have the following routes:

/
/settings
/settings/connections
/articles
/articles/:article_id
/articles/:article_id/:author_id
/articles/:article_id/:author_id/details
/login
/logout

Here is what my main Switch looks like:

<Router>
  <Switch>
    <Route path="/articles" component={Articles} />
    <Route path="/settings" component={Settings} />
    <Route path="/login" component={Login} />
    <Route path="/logout" component={Logout} />
    <Redirect from="/" to="/articles" exact />
    <Route component={NotFound} />
  </Switch>
</Router>

Then in Articles.js I have another Switch.

<Switch>
  <Route path="/articles/:article_id/details" component={ArticleDetail} />
  <Route path="/articles/:article_id/authors" component={ArticleAuthors} />
  <Route path="/articles/:article_id/authors/:author_id" component={ArticleAuthor} />
  <Route path="/articles/:article_id/authors/:author_id/details" component={ArticleAuthorDetails} />
  <Redirect from="/articles/:article_id" to="/articles/:article_id/details" exact />
</Switch>

Here's the issue: When I navigate to /articles/<article_id>/details manually, I get the aforementioned warning. I've tried to manually check if the current route is on /articles/<article_id> or /articles/<article_id>/ before redirecting, but this seems hacky/wrong.

Is there an easier way to achieve what I'm trying to do? Or am I misusing react router?

score 0 · Answer 1 · answered Mar 05 '19 at 23:47

Did you get this working? If you could provide more code (or a repo) I could have a look.

I tried the following which worked for me (react-router-dom version 4.3.1)

import React from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";

const Settings = () => (<div>Settings</div>);
const ArticleAuthors = () => (<div>ArticleAuthors</div>);
const ArticleDetail = () => (<div>ArticleDetail</div>);

const Articles = () => (
    <div>
        Articles
        <Switch>
            <Route path="/articles/:article_id/details" component={ArticleDetail} />
            <Route path="/articles/:article_id/authors" component={ArticleAuthors} />
            <Redirect from="/articles/:article_id" to="/articles/:article_id/details" exact />
        </Switch>
    </div>
);


const App = () => (
    <Router>
        <Switch>
            <Route path="/articles" component={Articles} />
            <Route path="/settings" component={Settings} />
            <Redirect from="/" to="/articles" exact />
        </Switch>
    </Router>
);

export default App;

Nested Switches and Default Subroutes with React Router 4

1 Answers1