反应-嵌套路线不显示导航

Question

我有一个项目，该项目包括两个主要部分：一个网站和该网站的控制面板。该网站由几个不同的页面组成，控制面板也是如此。控制面板和网站都有各自的导航栏。

路径结构应如下所示：

网站路径为：url.com/，url.com/loremipsum等。

控制面板路径为：url.com/admin，url.com/admin/users等。

我当前使用的是嵌套的React Router的当前设置面临的问题是，控制面板的路径也以/开头，因此该网站的导航对于控制面板是可见的。如果将参数“精确”放在网站路径上，那么这不再是问题，这将导致导航对网站的子页面不可见，例如上面的url.com/loremipsum示例。

这是app.js的代码

function App() {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Main} />
                <Route path="/admin" component={Admin} />
            </Switch>
        </Router>
    );
}

这是网站main.js的代码

function Main() {
    return (
        <Router>
            <div>
                <Navigation />
            </div>
            <Route path="/" component={Home} />
            <Route path="/film" component={Film} />
        </Router>
    );
}