我有一个 react 应用程序。它运行良好。它使用 redux,react-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>
);
我还收到控制台错误:相邻的 JSX 元素必须包含在封闭标记中
。如果有人可以提供帮助,那就太好了!
最佳答案
您的 HOC 包装器(requireNoAuthentication
和 requireAuthentication
)并使用 exact
(我认为这可能会产生 react -路由器 v4 独有的功能?)可能会扰乱您的路由历史记录。尝试重组您的路由,以便所有路由都属于 App
下 - 某些路由属于 RequireAuth
下,而其余路由则为公共(public)路由。
作为旁注:您可以通过使用 Redux< 来避免将
相反。React.cloneElement
与传递的类 methods
和 state
一起使用
routes/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>
);
关于javascript - React Router 在后退按钮上重复路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52504035/