WordPress React路由器路由不起作用
- 我构建一个页面“用户仪表板”，并在下面添加了快速代码[aft_wp_user_dashboard]，
代码在插件内部插件内部文件
function aft_wp_user_dashboard() {
return "<div id='aft_wp_user_dashboard'>User Dashboard</div>";
}
add_shortcode('aft_wp_user_dashboard', 'aft_wp_user_dashboard');
打开http：// localhost/user-ders-dashboard，我在Inspect
上获取此信息。＆lt; div ID ='aft_wp_user_dashboard'＆gt;＆lt;/div＆gt;i Rende React项目上进行ID ='aft_wp_user_dashboard'和React Project Renders在此处
函数index（）{ 返回 （ ＆lt; browserrouter basename =“/user-dashboard”＆gt; ＆lt;悬浮hallback = {＆lt; div＆gt; loading ...＆lt;/div＆gt;}＆gt; ＆lt;路线＆gt; ＆lt;路由exkent path =“ /” element = {＆lt; userDashboard /＆gt;} /＆gt; ＆lt;路由exkert path =“ /product”元素= {＆lt; product /＆gt;} /＆gt; ＆lt;/routes＆gt; ＆lt;/suspense＆gt; ＆lt;/browserrouter＆gt; ）}
document.addeventlistener（'domcontentloaded'，（）=＆gt; { var root_id =“ aft_wp_user_dashboard” if（'undefined'！== typeof document.getElementById（root_id）＆amp;＆amp; null！== document.getElementById（root_id））{ ReactDom.render（＆lt; index /＆gt; document.getElementById（root_id））; }} ）;
主和产品链接（React-Router-dom）效果很好，组件渲染
函数userdashboard（）{ 返回 （ ＆lt; div＆gt; ＆lt;链接到=“/”＆gt; main＆lt;/link＆gt; ＆lt;链接到=“/product”＆gt; product＆lt;/link＆gt; ＆lt;/div＆gt; ） }问题是，当我刷新页面http：// localhost/user-dashboard/product时，给出了404页。
有人面对这个问题。
注意：我不能使用此解决方案在WordPress中进行反应路由，并更改了WP Permalink设置。
- i build a page "user dashboard" and added shortcode [aft_wp_user_dashboard]
below code is inside plugins main file
function aft_wp_user_dashboard() {
return "<div id='aft_wp_user_dashboard'>User Dashboard</div>";
}
add_shortcode('aft_wp_user_dashboard', 'aft_wp_user_dashboard');
opening http://localhost/user-dashboard, i get this on inspect
<div id='aft_wp_user_dashboard'></div>i render react project for id='aft_wp_user_dashboard' and react project renders here
function Index() { return ( <BrowserRouter basename="/user-dashboard"> <Suspense fallback={<div>Loading...</div>}> <Routes> <Route exact path="/" element={<UserDashboard />} /> <Route exact path="/product" element={<Product />} /> </Routes> </Suspense> </BrowserRouter> )}
document.addEventListener('DOMContentLoaded', () => { var root_id = "aft_wp_user_dashboard" if ('undefined' !== typeof document.getElementById(root_id) && null !== document.getElementById(root_id)) { ReactDOM.render(<Index />, document.getElementById(root_id)); }}
);Main and Product Link(react-router-dom) works fine and component render
function UserDashboard() { return ( <div> <Link to="/">Main</Link> <Link to="/product">Product</Link> </div> ) }problem is, when i refresh page http://localhost/user-dashboard/product, 404 page is given.
Have anyone faced this issue.
Note: I cannot use this solution React routing in wordpress and have changed wp permalink settings to post name.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
由于我无法找到适当的链接路由解决方案，因此我通过条件组件渲染解决了此问题。
As i am unable to find proper solution for link routing, i solved this via conditional component rendering.