问题

Question

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

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

**index.js** 

render(
  <Provider store={store}>
    <App />
  </Provider>,
  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>
    );

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

现在我的问题：

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

不幸的是，这些路线都不起作用.. 我非常困惑，因为一切似乎都是正确的

Answer 1

问题

您的所有嵌套路径都不与主路由器的 PrivateRoute 呈现的“/”完全匹配，因此不会呈现它们。

解决方案

将父路由放在 Switch 中并重新排序路由，以便“/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.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>

嵌套反应路由器

1 个答案:

问题

解决方案