Question

因此，切换到最新的React Router（1.0.0RC3）。我遇到了一些旧功能，我无法找到如何使用新的1.0 API进行复制。

在我的路由器中，我总是呈现顶级App组件，然后是第二级Layout组件，然后是Page组件。在旧的React路由器中，我不必在path上放置Route属性，因此我可以将某些路由“分组”为父组件而不向我的URL添加另一个级别。 / p>

下面，您会看到在点击/路线时，我会尝试加载App，DefaultLayout和Home。但是，如果没有明确的DefaultLayout属性，它将不会呈现path。因此，如果我将path="app"放在我的默认布局上，它就会起作用，但是如果可能的话，我试图不改变我的主页路径。

我尝试使用嵌套IndexRoutes放置路径，放置绝对路径（不起作用）。在RR 1.0中还有办法做到这一点吗？

export const routes = (
    <Router history={createBrowserHistory()}>
        <Route path="/" component={App}>
            <Route component={DefaultLayout}> // Requires `path` Here
                <IndexRoute component={Home} />
                <Route path="about" component={About} />
                <Route path="contact" component={Contact} />
                <Route path="careers" component={Careers} />
            </Route>
            <Route path="blog" component={BlogLayout}>
                <IndexRoute component={BlogHome} />
                <Route path="posts/:post_name" component={BlogPost} />
            </Route>
        </Route>
    </Router>
);

Answer 1

如果我理解正确，您的路线应如下：

export const routes = (
    <Router history={createBrowserHistory()}>
        <Route component={App}>
            <Route path="/" component={DefaultLayout}> // Requires `path` Here
                <IndexRoute component={Home} />
                <Route path="about" component={About} />
                <Route path="contact" component={Contact} />
                <Route path="careers" component={Careers} />
            </Route>
            <Route path="blog" component={BlogLayout}>
                <IndexRoute component={BlogHome} />
                <Route path="posts/:post_name" component={BlogPost} />
            </Route>
        </Route>
    </Router>
);

如何在React Router 1.0中模仿DefaultRoute

1 个答案: