Как разделить маршруты внутри приложения React

Question

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

<Router  routes={routes} />

I would like to have routes section in a separate file, so far I tried this:
routes.js

export default (
    <div>
        <Route path="/" component={AppComponent}>
            <Route path="/someother" component={AddProductComponent} />
        </Route>

        <Route path="/products" component={ListProductComponent} />
    </div>
);

и в index.js

import routes from './routes';
<Router  routes={routes} />

По какой-то причине приложение теперь отображается пустым. похоже, что маршруты не отображаются.

ОБНОВЛЕНИЕ, это весь мой index.js, за исключением пропущенного импорта из-за переполнения стека и слишком большого количества кода:

const rootReducer = combineReducers({
    products: productReducer,
});

const store = createStore(
    rootReducer,
    applyMiddleware(thunk),
);

ReactDOM.render(
    <Provider store={store}>
        <Router  routes={routes} />
    </Provider>
    , document.getElementById('root')
);

Обновление route.js

export default (
    <Switch>
       <Route exact path="/" component={AppComponent}/>

        <Route path="/products" component={ListProductComponent}>
            <Route path="/details/:productId" component={AddProductComponent} />
        </Route>
    </Switch>
);

Answer 1

Вам не хватает переключателя:

<Switch>
    <Route path="/someother" component={AppComponent}>
    <Route path="/products" component={ListProductComponent} />
    <Route path="/" component={AppComponent}>
</Switch>

Кроме того, в вашем коде будет отображаться только AppComponent, поскольку любой URL (/, /home, /etc) начинается с косой черты, введенной в атрибуте path. Вы могли бы хотеть это как последняя страница, запасной вариант.

Атрибут path работает с подстановочным знаком: path="/" -> path="/**" функционально одинаковы. Если вам нужен точный путь, добавьте exact к Маршруту.

---

Если вы хотите разделить маршруты на отдельные файлы, вы можете сделать это:

<Switch>
    <Route path={"/user"} component={UserRouter}/>
    <Route path={"/product"} component={ProductRouter}/>
</Switch>
// In userRouter.jsx:
export function UserRouter() {
    return <Switch>
        <Route exact path={"/user/list"} component={UserListPage}/>
        <Route exact path={"/user/signup"} component={userSignupPage}/>
        <Route exact path={"/user/profile"} component={UserProfilePage}/>
    </Switch>
};