Reactjs 为什么我的React组件在使用React路由器时不渲染?
我已经在App.js中设置了React路由器。页面组件不会呈现。当我单击一个链接时,页面组件将不会呈现,但浏览器中的URL将更改为“Page/{id}”。为什么会这样 页面组件:Reactjs 为什么我的React组件在使用React路由器时不渲染?,reactjs,react-router,Reactjs,React Router,我已经在App.js中设置了React路由器。页面组件不会呈现。当我单击一个链接时,页面组件将不会呈现,但浏览器中的URL将更改为“Page/{id}”。为什么会这样 页面组件: function Pages(props) { const managedPages = JSON.parse(localStorage.getItem("managedPages")); console.log(managedPages); return ( <div>
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> ); }
函数页(props){const managedPages=JSON.parse(localStorage.getItem(“managedPages”);console.log(managedPages);
返回(
{managedPages.map(第=>(
))}
); }
App.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
和/page
是两种不同的模式,它们不匹配
将路线定义更改为以下内容:
<Route path="/page/:id" component={Page} />
另外,您在/pages
路由中定义了/page
路由,当您导航到/page:id
时,不会立即呈现该路由。因此,将路由定义从页面组件中拉出,它应该可以工作
我已经这样做了,但页面仍然无法呈现。我在页面中也有一个类似的链接,它不使用参数,但也不呈现。你也可以添加你的App.jsx吗?可能发生的事情是你没有用路由器
(例如浏览器路由器
)包装整个内容,这是必需的。