为什么反应路线无法正确使用确切的属性?

时间:2018-11-14 11:19:18

标签: reactjs react-router

反应路线不具有确切的属性。但是当我删除确切的属性并将第二条路线作为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")
);

0 个答案:

没有答案