如何解决反应PrivateRoute无法正确呈现子级
Link to sandbox
当我使用PrivateRoute
时,DOM呈现<children history="[object Object]" location="[object Object]" match="[object Object]"></children>
而不是我传递的<AdminLayout/>
的{{1}}。
AppRouter
中的错误:未定义子级
这:
PrivateRoute
。
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in,or you might have mixed up default and named imports
这是Check the render method of `Context.Consumer`.
PrivateRoute
这是import React from "react";
import { Route,Redirect } from "react-router-dom";
function PrivateRoute({ children,roles,...rest }) {
console.log("childen",children);
return (
<Route
{...rest}
render={(props) => {
console.log("propsssss",props);
// if (!localStorage.getItem('userid')) {
if (!localStorage.getItem("access_token")) {
// not logged in so redirect to login page with the return url
return (
<Redirect
to={{ pathname: "/auth/login",state: { from: props.location } }}
/>
);
}
// logged in so return component
return <children {...props}/>;
}}
/>
);
}
export default PrivateRoute;
AppRouter
这是import React from "react";
import { Router,Route,Switch,Redirect } from "react-router-dom";
import history from "../helpers/history";
import AdminLayout from "layouts/Admin/Admin.js";
import AuthLayout from "layouts/Auth/Auth.js";
import PrivateRoute from "./PrivateRoute";
const AppRouter = () => {
return (
<Router history={history}>
<PrivateRoute path="/admin" render={(props) => <AdminLayout {...props} />} />
<Route
path="/auth/login"
render={(props) => <AuthLayout {...props} />}
/>
<Redirect from="*" to="/auth/login" />
</Switch>
</Router>
);
};
export default AppRouter;
history.js
解决方法
代码中存在两个问题,一个是您正在使用var navigationStrategy = new BottomBarNavicationStrategy(this);
bottomNavigationBar.NavigationItemSelected += OnItemSelected;
void OnItemSelected(object sender,BottomNavigationView.NavigationItemSelectedEventArgs e)
{
navigationStrategy.Navigate(this,e.Item.ItemId);
}
来生成组件,而在renderProps
组件中却希望自己是孩子。正确的方法:
PrivateRoute
在<PrivateRoute path="/admin">
<AdminLayout />
</PrivateRoute>
内,您需要按原样返回孩子:
PrivateRoute
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。