Question

我想在我的页面上定义以下结构：

布局是静态的，包含显示在每个页面上的元素，并根据网址呈现页面内容。

为实现这一目标，我已定义AppRoutes，Layout，About和NotFound并使用了react-router，v4：< / p>

AppRoutes.js

export default class AppRoutes extends React.Component
{  
    render ()
    {
        const supportsHistory = 'pushState' in window.history;
        return (
        <BrowserRouter forceRefresh={!supportsHistory} history={hashHistory} onUpdate={() => window.scrollTo(0, 0)}>
            <div>
                <Route path='/' component={Layout}>
                    <Route path='/about' component={About}/>
                    <Route path='*' component={PageNotFround}/>
                </Route>
            </div>
        </BrowserRouter>);
    };
};

Layout.js

class NaviGationPane extends React.Component
{
    render()
    {
        return (
            <div>
                <NavLink to="/">Home</NavLink>
                <NavLink to="/about">About</NavLink>
            </div>
        )
    }
}

export default class Layout extends React.Component
{
    render ()
    {
        return (
        <div className="app-container">
            <header>
                <NaviGationPane/>
            </header>
            <div className="app-content">
                {this.props.children}
            </div>
        </div>
        );
    }
}

呈现布局标题，但在/或/about处，页面内容为空。如果我将其更改为下面的那个，PageNotFound总是在最后呈现，无论路径是什么，而其余的按预期工作，即/呈现他Layout，而/about呈现About组件。

<BrowserRouter forceRefresh={!supportsHistory} history={hashHistory} onUpdate={() => window.scrollTo(0, 0)}>
                <div>
                    <Route path='/' component={Layout}/>
                    <Route path='/about' component={About}/>
                    <Route path='*' component={PageNotFround}/>
                </div>
            </BrowserRouter>

我检查过，在this.props.children中Layout中的<Layout> <Switch> <Route exact path='/' component={IndexPage}/> <Route path='/about' component={About}/> <Route component={PageNotFround}/> </Switch> </Layout>未定义。

更新我尝试了一些事情并想出了

react-router

将是基本场景，现在我理解为什么我以前的代码不起作用：在<Route to='/' component={Layout}> <Route path='/about' component={About}/> </Route> v4中

<BrowserRouter>
      <div>
         <Route path='/' component={Layout}>
         <Route path='/about' component={About}/>
         <Route path='*' component={PageNotFround}/>
      </div>
 </BrowserRouter>

无效。结构

将保留匹配的路线，直到所有规则都用完为止，*每次都会匹配，<Layout>每次都会匹配。

所以我使用<Switch>组件来包装所有内容并在其中创建路由并确保只匹配一个路径我使用/about/:user。

这不是我想要的，因为如果我添加路径About，则只会呈现this.CreateTreeView = function () { **"plugins" : [ "checkbox", ],** $('#jstree_demo_div').jstree({ 'core': { **'multiple': false,** 'data': [ { "id": "ajson1", "parent": "#", "text": "Simple root node" }, { "id": "ajson2", "parent": "#", "text": "Root node 2" }, { "id": "ajson3", "parent": "ajson2", "text": "Child 1" }, { "id": "ajson4", "parent": "ajson2", "text": "Child 2" }, ] }, **'checkbox' : { 'deselect_all': true, 'three_state' : false, }** }); }组件。所以问题仍然存在。

如何将子进程传递给父<route>组件

0 个答案: