我需要一些帮助来在 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>
不幸的是,这些路线都不起作用.. 我非常困惑,因为一切似乎都是正确的
答案 0 :(得分:2)
您的所有嵌套路径都不与主路由器的 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>