Angularjs 使用内部视图响应路由器V4

我来自Angular的背景，我正在尝试用Angular的

ui路由器创建我以前知道的东西

我想为应用程序创建一个主模板，该模板将有一个静态侧栏，视图将根据侧栏中单击的链接进行更改

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

试图通过
反应路由器
实现以下目标：

<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为什么和如何正确地做，不确定这是否是你所期望的，但我有点困了。卢兹

你可以这样做

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

好的，谢谢你给我指出了正确的方向。这不是解决办法，但为我指明了方向

这是解决办法

<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>


哦，我漂亮的应用程序！
仪表板
账户
关于

<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>