0

我的 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 缺少导入过多的代码：

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>
);
4

1 回答 1

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到 Route。

如果您打算将路由拆分为单独的文件，您可以这样做：

<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>
};
于 2019-01-18T13:31:07.097 回答