javascript - 如何在 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，除了由于stackoverflow companing太多代码而缺少导入:

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

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

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

更新routes.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>
};