反应路线不具有确切的属性。但是当我删除确切的属性并将第二条路线作为path =“ / Admin”作为第一条路线对象时,它的效果很好
{ path: "/Admin", name: "Home", component: Dashboard},
...,
{ path: "/", name: "Frontend", component: Frontend }
请在下面查看整个代码,并向我建议我所缺少的内容。
仪表板路线文件(我在其中定义仪表板路线的文件)
import Dashboard from "views/Dashboard/Dashboard";
import UserProfile from "views/UserProfile/UserProfile";
const dashboardRoutes = [
{
path: "/Admin/dashboard",
name: "Dashboard",
icon: "pe-7s-graph",
component: Dashboard
},
{
path: "/Admin/user",
name: "User Profile",
icon: "pe-7s-user",
component: UserProfile
},
{ redirect: true, path: "/Admin", to: "/Admin/dashboard", name: "Dashboard" }
];
export default dashboardRoutes;
Dashboard.jsx(我在其中定义管理员布局并为路径创建路径的文件)
...
import dashboardRoutes from "routes/dashboard.jsx";
class Dashboard extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="wrapper">
<Switch>
{dashboardRoutes.map((prop, key) => {
console.log('prop.name', prop.name);
if (prop.name === "Notifications") {
return (
<Route path={prop.path} key={key}
render={routeProps => (
<prop.component
{...routeProps}
/>
)}
/>
);
}
if (prop.redirect){
return <Redirect from={prop.path} to={prop.to} key={key} />;
}
return (
<Route path={prop.path} component={prop.component} key={key} />
);
})}
</Switch>
</div>
);
}
}
export default Dashboard;
索引路由文件(我为管理员和前端定义了索引路由)
import Dashboard from "pathTo/Dashboard.jsx";
import Frontend from "pathTo/Frontend.jsx";
import AdminLogin from "pathTo/AdminAuth.jsx";
var indexRoutes = [
{ path: "/", name: "Frontend", component: Frontend },
{ path: "/Admin", name: "Home", component: Dashboard},
{ path: "/Admin-login", name: "AdminLogin", component: AdminLogin}
];
export default indexRoutes;
索引文件(我在其中定义存储和索引路由的文件)
import { history } from './helper/history';
import store from "./redux/store/index";
import { Provider } from "react-redux";
import indexRoutes from "routes/index.jsx";
...
ReactDOM.render(
<Provider store={store}>
<Router history={history} >
<Switch>
{indexRoutes.map((prop, key) => {
return <Route path={prop.path} component={prop.component} key={key} />;
})}
</Switch>
</Router>
</Provider>,
document.getElementById("root")
);