Javascript 嵌套反应路由器

我需要一些帮助来完成ReactJS中的路由。 我描述我的问题，希望你能帮助我

我在这个文件中有著名的index.js，我从中调用app.js

**index.js** 

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);

**index.js**
渲染(
,
document.getElementById（'app'）
);

在app.js中，我编写了一些路由代码，如下所示：

**App.js**

return (
        <div>
            {message &&
                <div className={`alert ${type}`}>{message}</div>
            }
            <Router history={history}>
                <div>
                    <PrivateRoute exact path="/" component={Main} />
                    <Route path="/login" component={SignIn} />
                </div>
            </Router>
        </div>
    );

**App.js**
返回(
{消息&&
{message}
}
);

这工作正常，登录后我重定向到Main.js

现在我的问题是：

我在Main.js页面中写了一些路由，所有其他页面都必须从中继承。我的意思是所有其他页面都必须有Main.js的框架

**Main.js**

<main className={classes.content}>
    <Link to="/HomePage"> HomePage</Link>
    <Link to="/Admin"> Admin </Link>
    <Link to="/Menus"> Menu </Link>
    <Link to="/Product"> Product </Link>
    <div className={classes.appBarSpacer} />
    <Switch>
        <PrivateRoute path="/HomePage" component={HomePage} />
        <PrivateRoute path="/Admin" component={Admin} />
        <PrivateRoute path="/Menus" component={Menus} />
        <PrivateRoute path="/Product" component={Product} />
    </Switch>
</main>

下面是Main.js的一些代码

**Main.js**

<main className={classes.content}>
    <Link to="/HomePage"> HomePage</Link>
    <Link to="/Admin"> Admin </Link>
    <Link to="/Menus"> Menu </Link>
    <Link to="/Product"> Product </Link>
    <div className={classes.appBarSpacer} />
    <Switch>
        <PrivateRoute path="/HomePage" component={HomePage} />
        <PrivateRoute path="/Admin" component={Admin} />
        <PrivateRoute path="/Menus" component={Menus} />
        <PrivateRoute path="/Product" component={Product} />
    </Switch>
</main>

**Main.js**
主页
管理
菜单
产品

不幸的是，这些路线都不起作用。。 我非常困惑，因为所有的事情似乎都是对的

没有任何嵌套路径与主路由器的

privaterout

呈现的“/”完全匹配，因此不会呈现它们

解决方案 将父路由放置在

开关中

并重新排序路由，以便在更通用的“/”路径之前匹配“/login”路径。从

“/”

路径中删除

exact

道具

App.js

return (
  <div>
    {message &&
      <div className={`alert ${type}`}>{message}</div>
    }
    <Router history={history}>
      <Switch>
        <Route path="/login" component={SignIn} />
        <PrivateRoute path="/" component={Main} />
      </Switch>
    </Router>
  </div>
);

<main className={classes.content}>
  <Link to="/HomePage"> HomePage</Link>
  <Link to="/Admin"> Admin </Link>
  <Link to="/Menus"> Menu </Link>
  <Link to="/Product"> Product </Link>
  <div className={classes.appBarSpacer} />
  <Switch>
    <PrivateRoute path="/HomePage" component={HomePage} />
    <PrivateRoute path="/Admin" component={Admin} />
    <PrivateRoute path="/Menus" component={Menus} />
    <PrivateRoute path="/Product" component={Product} />
  </Switch>
</main>

返回(
{消息&&
{message}
}
);

Main.js

return (
  <div>
    {message &&
      <div className={`alert ${type}`}>{message}</div>
    }
    <Router history={history}>
      <Switch>
        <Route path="/login" component={SignIn} />
        <PrivateRoute path="/" component={Main} />
      </Switch>
    </Router>
  </div>
);

<main className={classes.content}>
  <Link to="/HomePage"> HomePage</Link>
  <Link to="/Admin"> Admin </Link>
  <Link to="/Menus"> Menu </Link>
  <Link to="/Product"> Product </Link>
  <div className={classes.appBarSpacer} />
  <Switch>
    <PrivateRoute path="/HomePage" component={HomePage} />
    <PrivateRoute path="/Admin" component={Admin} />
    <PrivateRoute path="/Menus" component={Menus} />
    <PrivateRoute path="/Product" component={Product} />
  </Switch>
</main>

主页
管理
菜单
产品

您使用的是什么版本的react路由器？react路由器dom:v 4.1.2oh谢谢。我认为另一个错误是关于路由器内部。但我无法想象我为什么错了…？@Cawboy

路由器

中的div是可以的，因为路由器包含所有匹配，但是

交换机

中的div会导致问题，因为div将被“匹配”，而里面的所有内容都将停止匹配。

开关

组件应仅呈现

路由

（或自定义

私有路由

等变体）或

重定向

子组件。