React Router Дублировать маршруты на кнопку «Назад»

Question

У меня есть приложение реакции.Работает нормально.Он использует redux, response-router 3. Маршруты работают нормально, но когда я нажимаю кнопку "Назад", они дублируются.Например, из localhost:3000/admin/main, которым я являюсь в настоящий момент, когда я возвращаюсь, он переходит к localhost:3000/admin/admin/main, который не найден.

Вот мой код маршрута:

export default (
    <Route path="/" component={App}>
    <Route path="home" component={requireNoAuthentication(HomeContainer)} />
        <Route path="login" component={requireNoAuthentication(LoginView)} />
        <Route exact path="admin/user" component={requireAuthentication(UserView)} />
        <Route exact path="admin/main" component={requireAuthentication(UsersListView)} />
        <Route path="secure" component={requireAuthentication(CustomerView)} />
        <Route exact path="*" component={DetermineAuth(NotFound)} />
    </Route>
);

Iтакже получаю консольную ошибку: Adjacent JSX elements must be wrapped in an enclosing tag.Если кто-то может помочь, было бы здорово, спасибо !!

Answer 1

Ваши HOC оболочки (requireNoAuthentication и requireAuthentication) и использование exact (я думаю, что это может быть только реакцией на маршрутизаторе v4?) Могут портить историю вашего маршрута.Попробуйте реструктурировать свои маршруты так, чтобы все они попали под App - некоторые маршруты подпадают под RequireAuth, а остальные общедоступны.

Рабочий пример: https://codesandbox.io/s/ymxlp58xyj (какпримечание: вы можете избежать использования React.cloneElement с переданным классом methods и state, используя вместо этого Redux)

routs / index.js

import React from "react";
import { browserHistory, IndexRoute, Router, Route } from "react-router";
import App from "../components/App";
import Home from "../components/Home";
import Info from "../components/Info";
import ShowPlayerRoster from "../components/ShowPlayerRoster";
import ShowPlayerStats from "../components/ShowPlayerStats";
import Schedule from "../components/Schedule";
import Sponsors from "../components/Sponsors";
import RequireAuth from "../components/RequireAuth";

export default () => (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route component={RequireAuth}>
        <IndexRoute component={Home} />
        <Route path="roster" component={ShowPlayerRoster} />
        <Route path="roster/:id" component={ShowPlayerStats} />
        <Route path="schedule" component={Schedule} />
      </Route>
      <Route path="info" component={Info} />
      <Route path="sponsors" component={Sponsors} />
    </Route>
  </Router>
);

index.js

import React from "react";
import { render } from "react-dom";
import App from "../routes";
import "uikit/dist/css/uikit.min.css";

render(<App />, document.getElementById("root"));

компонентов / App.js

import React, { Component, Fragment } from "react";
import { browserHistory } from "react-router";
import Header from "./Header";

export default class App extends Component {
  state = {
    isAuthenticated: false
  };

  isAuthed = () => this.setState({ isAuthenticated: true });

  unAuth = () =>
    this.setState({ isAuthenticated: false }, () => browserHistory.push("/"));

  render = () => (
    <Fragment>
      <Header
        isAuthenticated={this.state.isAuthenticated}
        unAuth={this.unAuth}
      />
      {React.cloneElement(this.props.children, {
        isAuthenticated: this.state.isAuthenticated,
        isAuthed: this.isAuthed
      })}
    </Fragment>
  );
}

компонентов / RequireAuth.js

import React, { Fragment } from "react";
import Login from "./Login";

export default ({ children, isAuthenticated, isAuthed }) =>
  !isAuthenticated ? (
    <Login isAuthed={isAuthed} />
  ) : (
    <Fragment>{children}</Fragment>
  );