Вложенные маршруты внутри Switch

Question

На моем index.js у меня есть следующее

var indexRoutes = [
    { path: "/", name: "Homepage", component: Home},
    { path: "/dashboard", name: "Dashboard", component: Dashboard },
];

ReactDOM.render(
  <HashRouter>
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route path={prop.path} component={prop.component} exact/>;
      })}
      <Route component={Homepage} />
    </Switch>
  </HashRouter>,
  document.getElementById("root")
);

В основном, компонент Home будет иметь титульную страницу, логин и регистрацию, как показано ниже:

<div className="app-container">
    <Header/>
    <Switch>
        <Route path="/" component={Visitor} exact/>
        <Route path="/register" component={Register} exact/>
        <Route path="/login" component={Login} exact />
        <Route component={NotFound}/>
    </Switch>
    <Footer/>
</div>

На данный момент все работает нормально.Но потом, когда я пытаюсь использовать вложенные маршруты на панели инструментов, они не работают.

const dashboardRoutes = [
  {
    path: "/dashboard",
    name: "Dashboard",
    icon: "pe-7s-graph",
    component: Dashboard
  },
  {
    path: "/dashboard/tours",
    name: "Tours",
    icon: "pe-7s-plane",
    component: Tours
  },
  {
    path: "/dashboard/user",
    name: "User Profile",
    icon: "pe-7s-user",
    component: UserProfile
  }] 

 render() {

    return (
      <div className="wrapper">
        <Sidebar {...this.props} />
        <div id="main-panel" className="main-panel" ref="mainPanel">
          <Header {...this.props} />
          <Switch>


              if (prop.redirect)
                return <Redirect from={prop.path} to={prop.to} key={key} />;
              else 
                return <Route path={prop.path} component={prop.component} exact />


            })}
          </Switch>
          <Footer />
        </div>
      </div>
    );
  }
}

/ register / login и / dashboard - все работает нормально.Но когда я пытаюсь получить доступ, например / dashboard / user, он показывает мне страницу NotFound из компонента Home.

Что я делаю не так?Спасибо.

Answer 1

Вы используете параметр exact для маршрута /dashboard.Исходя из официальных документов , оно не будет соответствовать чему-то большему, чем /dashboard.Ваш index.js должен иметь return <Route path={prop.path} component={prop.component} />

path    location.pathname   exact   matches?
/one    /one/two            false   yes
/one    /one/two            true    no

Редактировать: Исходя из вашего рекурсивного подхода, я бы поместил параметр exact в ваш массив, а затем отобразил бы, если true.

var indexRoutes = [
    { path: "/", name: "Homepage", component: Home, exact: true},
    { path: "/dashboard", name: "Dashboard", component: Dashboard, exact: false },
];

ReactDOM.render(
  <HashRouter>
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route path={prop.path} component={prop.component} exact={prop.exact} />;
      })}
      <Route component={Homepage} />
    </Switch>
  </HashRouter>,
  document.getElementById("root")
);