Вложенные коммутаторы и стандартные подпотоки с React Router 4

Question

Я получаю предупреждение Warning: You tried to redirect to the same route you're currently on при попытке перейти к /articles/<article_id>/details.

В настоящее время у меня есть следующие маршруты:

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

Вот как выглядит мой основной Switch:

<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>

Затем в Articles.js У меня есть еще один 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>

Вот проблема: когда я перехожу на /articles/<article_id>/details вручную, я получаю вышеупомянутое предупреждение.Я пытался вручную проверить, находится ли текущий маршрут на /articles/<article_id> или /articles/<article_id>/ перед перенаправлением, но это кажется ошибочным / неправильным.

Есть ли более простой способ добиться того, что я пытаюсь сделать?Или я неправильно использую реагирующий роутер?

Answer 1

Вы работали?Если бы вы могли предоставить больше кода (или репо), я мог бы взглянуть.

Я попробовал следующее, что сработало для меня (react-router-dom версия 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;