javascript - 在后退按钮上反应路由器重复路由
问题描述
我有一个反应应用程序。它工作正常。它使用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>
);
我还收到控制台错误:Adjacent JSX elements must be wrapped in an enclosing tag
. 如果有人可以提供帮助将非常感谢!
解决方案
您的HOC
包装器(requireNoAuthentication
和requireAuthentication
)和使用exact
(我认为这可能是 react-router v4 唯一的功能?)可能会弄乱您的路由历史记录。尝试重组您的路线,使所有路线都属于App
- 一些路线属于RequireAuth
,而其余路线是公开的。
附带说明:您可以避免使用React.cloneElement
with 传递的类methods
,而是state
使用Redux
。
路线/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>
);
推荐阅读
- ngx-translate - 如何在 Angular 中翻译页面?前任。英语到阿拉伯语
- c# - 证书链 X509
- android - Android App 聊天机器人与对话流集成
- c# - Visual Studio C# 超链接在浏览器和 .net 应用程序中加载
- c++ - 将 Clang AST 转换为其他语言的 AST
- laravel - 如何显示当前时间的下一个时间段
- oracle - 插入后的Oracle触发器
- azure-devops - 如何在单个 CSV 文件中导入包含问题和史诗(父链接)的 Azure DevOps CSV 文件
- python - 如何使用 subprocces 库使用 python 打开新的 Powerpoint 文件?
- java - JAVA 中的 Oracle next_day 函数等效项