Question

我来自Angular背景，我正在尝试使用angular ui-router创建我之前所知道的。

我想为应用创建一个主模板，该模板将具有静态侧边栏，并且视图会根据侧边栏中点击的链接进行更改。

关键是侧边栏是静态的，但视图是动态加载的。我去过的教程正在重新加载每个视图上的导航链接，这不是我拍摄的内容。也许我错过了一些东西，但在我看来，侧边栏应该是静态的，永远不会重新加载......

尝试使用react-router：

实现以下目标

<article id="my-app">
    <header>
        <h1>Oh my beautiful app!</h1>
    </header>

    <aside>
        <nav>
            <Link to="/"/>
            <Link to="/page1"/>
            <Link to="/page2"/>
        </nav>
    </aside>

    <section><!-- VIEW RENDERED HERE --></section>

    <footer></footer>
</article>

如果这不是使用React完成的方式，我想知道为什么以及如何使用React以正确的方式完成

Answer 1

不确定这是否是你所期望的，但我有点困。 lulz。

您可以执行类似

的操作

<Router>
   <Route path="/" render={() => <LayoutComponent><MyComponent /></LayoutComponent>} />
</Router>

然后在布局中，渲染位置的某个地方

{this.props.children}

Answer 2

好的，谢谢 bunakawaka ，指出我正确的方向。这不是解决方案，但指出了我需要去的地方。

这是解决方案......

<article id="my-app">
    <header>
        <h1>Oh my beautiful app!</h1>
    </header>

    <aside>
        <nav>
            <Link to="/">Dashboard</Link>
            <Link to="/account">Account</Link>
            <Link to="/about">About</Link>
        </nav>
    </aside>

    <section>
        <BrowserRouter>
            <Switch>
                <Route exact path="/account" component={Account}/>
                <Route exact path="/about" component={About}/>
                <Route path="/" component={Dashboard}/>
            </Switch>
        </BrowserRouter>
    </section>

    <footer></footer>
</article>

使内部视图反应路由器V4

2 个答案: