2016-07-02 3 views
1

Можно ли сделать следующее с помощью React Route?Реагировать маршруты переместить маршруты в отдельный модуль?

Главная

<Routes handler={App}> 
    <Profile path="profile" /> 
    <Explore path="explore" /> 
    </Routes> 

Профиль

<Route> 
     <Route name="dashboard" handler={ProfileDashboard} /> 
     <Route name="repos" handler={ProfileRepos} /> 
    </Route> 

Исследуйте

<Route> 
     <Route name="home" handler={ExploreHome} /> 
     <Route name="showcase" handler={ExploreShowcase} /> 
    </Route> 
+0

мой вопрос, почему вы хотите это сделать? –

ответ

1

Вы можете добиться того, что с React маршрутизатора! :)

Но я хотел бы предложить вам, чтобы проверить его на «простые маршруты» способ настроить маршруты:

https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md#configuration-with-plain-routes

Используя это, вы начнете работать с routes объекта, и вы можете просто введите require и создайте свой маршрут на основе этих комбинаций. Нечто подобное:

const routes = { 
    path: '/', 
    component: App, 
    childRoutes: [ 
     require('./profile'), 
     require('./explore') 
    ] 
} 

Затем в (вы можете сделать то же самое explore.js) файл profile.js, вы будете иметь что-то вроде этого:

/* Import the ProfileDashboard and ProfileRepos here */ 

const profileRoutes = { 
    path: 'profile', 
    childRoutes: [{ 
     path: 'dashboard', 
     component: ProfileDashboard 
    }, { 
     path: 'repos', 
     component: ProfileRepos 
    }] 
}; 

И таким образом, вы можете добиться того, что вы хотите.

Если вы действительно не можете использовать простые маршруты, вы можете сделать что-то подобное:

<Route path="/" component={App}> 
    { require('./profile') } 
    { require('./explore') } 
</Route> 

И ваш profile.js, например:

module.exports = (
    <Route path="profile"> 
     <Route path="dashboard" component={ProfileDashboard} /> 
     <Route path="dashboard" component={ProfileRepos} /> 
    </Route> 
); 

Я не знаю, что React маршрутизатор которую вы используете, но вы можете достичь этого в любой версии, но, как предложение, попробуйте использовать последнюю версию. Так как он обрабатывает много классных вещей.

Надеюсь, это поможет!

+0

Вы сами пробовали? Я пробовал что-то вроде этого, но это не сработало! –

+0

Да, он работал. Какую версию реакции/реакции-маршрутизатора вы используете? –

+0

Да только что проверил это благодаря https://github.com/alikor/spike-react-routes –