reactjs - 为什么我的 React 组件在使用 React-Router 时不呈现?
问题描述
我已经在 App.js 中设置了我的 React 路由器。页面组件会渲染。当我点击一个链接时,页面组件将不会呈现,但浏览器中的 URL 会更改为“page/{id}”。为什么是这样?
页面组件:
function Pages(props) { const managedPages = JSON.parse(localStorage.getItem("managedPages")); console.log(managedPages);
return (
<div>
<List>
{managedPages.map(page => (
<ListItem key={page.id}>
<Link
to={`/page/${page.id}`}
style={{ textDecoration: "none", color: "black" }}
>
<ListItemText primary="Teszt Színház" />
</Link>
</ListItem>
))}
</List>
<Route path="/page" component={Page} />
</div> ); }
应用程序.js jsx:
return (
<MuiPickersUtilsProvider utils={MomentUtils}>
<BrowserRouter>
<div className="App">
<BarAndMenu
userLoginAndDataDownloadCompletedOut={
this.userLoginAndDataDownloadCompletedOut
}
/>
</div>
<Switch>
<Route path="/" exact component={OngoingEventList} />
<Route path="/selectSeat" component={SelectSeat} />
<Route path="/releasePurpose/:id" component={ReleasePurpose} />
<Route
path="/marketingResourceConfigurationAndResult/:id"
component={MarketingResourceConfigurationAndResult}
/>
<Route path="/myTickets" exact component={MyTicketList} />
<Route path="/myTickets/:id" component={MyTicket} />
<Route path="/auditoriumList/:id" component={AuditoriumSelector} />
<Route path="/pages" component={Pages} />
</Switch>
</BrowserRouter>
</MuiPickersUtilsProvider utils={MomentUtils}>
);
解决方案
这是因为/page/:id
and/page
是两种不同的模式,它们不匹配。
将您的 Route 定义更改为如下所示:
<Route path="/page/:id" component={Page} />
此外,您/page
在/pages
路由中定义了路由,当您导航到/page:id
. 因此,将路由定义从Pages
组件中提取出来,它应该可以工作。
https://reacttraining.com/react-router/web/example/url-params
推荐阅读
- android - 将布局约束为屏幕高度的 50%?
- python - Django 将外键值与另一个模型的属性进行比较
- css - Bootstrap4 - 全屏仪表板,带有调整大小和填充/拉伸到其 div 中的图像?
- odbc - 如何在 Wine 中为 BlackBox Component Builder 设置 ODBC?
- python - 让 Kivy 在 Win10 上的 WSL2 上的 Ubuntu 中工作
- reactjs - 如何渲染特定时间戳的反应组件
- javascript - 使用 CryptoJS (JAVASCRIPT) 和 OpenSSL (PHP) 实现相同的加密
- microsoft-graph-api - Microsoft Teams 云呼叫/图表 - 有没有办法让机器人将 PSTN 参与者添加到会议中?
- python - CIFAR10 数据加载器采样器拆分
- c# - 在 C# 中使用 Deedle 需要哪些 using 语句?“无法加载类型‘Deedle.Frame’”异常