admin管理员组文章数量:1287898
I am using react router with nginx running on my local machine. The child route is not being rendered inside the parent component (despite writing <outlet/> in the parent component). It just manages to load the parent component. I don't understand what I am doing wrong.
index.tsx (the router file)
import React, { Children, StrictMode } from "react"; 'Children' is declared but its value is never read.
import { createRoot } from "react-dom/client";
import Title from "./App";
import Homepage from './HomepageApp'
import MyGames from './MyGames'
import {createBrowserRouter, RouterProvider, createHashRouter} from 'react-router-dom' 'createHashRouter' is declared but its value is never read.
const rootElement = document.getElementById("root");
const router = createBrowserRouter([
{path: '/', element: <Title/>},
{
path: '/home',
element: <Homepage/>,
children: [
{index: true, path: 'games', element: <MyGames/>},
{path: 'software', element: <h1>SOFTWARE</h1>}
],
}
])
if(rootElement) {
const root = createRoot(rootElement);
root.render(
<StrictMode>
<RouterProvider router={router}/>
</StrictMode>
);
} else {
console.log("Element with id 'root' not found.")
}
HomepageApp.tsx
...
type HomepageProps = { 'HomepageProps' is declared but never used.
page: string
}
export default function Homepage() {
return (
<>
<h1 id="title">Shahroz Khan</h1>
<div id="homepageHeader">
<hr/>
<a className="active" href="/mygames">MyGames</a>
<a href="/Software">Software</a>
<a href="/Blog">Blog</a>
<a href="/AboutMe">About Me</a>
<RotatingBirdScene/>
<div id="rotatingBirdCanvas"/>
<br/>
</div>
<Outlet/>
</>
)
}
MyGames.tsx
export default function MyGames() {
console.log("Loaded game gallery")
return (
<>
<div className="gallery">
<div className="selectable">
<img src="/img/gameImages/1984.png"/>
<br/>
<a id="selectionTitle" href="/games/1984">1984</a>
<p id="desc">Made for a highschool english assignment</p>
<p id="platformDesc">Windows Linux</p>
</div>
<div className="selectable">
<img src="/img/gameImages/birbyNight.gif"/>
<br/>
<a id="selectionTitle" href="/games/Birby">Birby</a>
<p id="desc">A cute puzzle platformer</p>
<p id="platformDesc">Windows Linux</p>
</div>
<div className="selectable">
<img src="/img/gameImages/DegBomb.png"/>
<br/>
<a id="selectionTitle" href="/games/degBomb">Degree Bomb</a>
<p id="desc">Made for the Brackey's game jam when I was 15</p>
<p id="platformDesc">Windows</p>
</div>
<div className="selectable">
<img src="/img/gameImages/lifelessBits.gif"/>
<br/>
<a id="selectionTitle" href="/games/lifelessBits">lifelessBits</a>
<p id="desc">An arena shooter inspired by bauxite's meteorite LOWREZJAM entry</p>
<p id="platformDesc">Windows Linux</p>
</div>
<div className="selectable">
<img src="/img/gameImages/terminalShooter.png"/>
<br/>
<a id="selectionTitle" href="/games/terminalShooter">terminalShooter</a>
<p id="desc">A shootemup set in some computer</p>
<p id="platformDesc">Windows Linux</p>
</div>
<div className="selectable">
<img src="/img/gameImages/dreamGirl.png"/>
<br/>
<a id="selectionTitle" href="/games/dreamGirl">Undisclosed project</a>
<p id="desc">A story game currently in development with a custom engine</p>
<p id="platformDesc">Windows Linux</p>
</div>
</div>
</>
)
}
and as you may expect the console message is not being printed. If it helps, here is my nginx config file also:
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
types_hash_max_size 4096;
server {
expires off;
add_header Cache-Control "no-cache, no-store, must-revalidate";
listen 80;
server_name localhost;
location / {
root /home/user/portfolio;
index index.html index.htm;
try_files $uri /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
本文标签： reactjsParent route not rendering the child component of the child pathStack Overflow
版权声明：本文标题：reactjs - Parent route not rendering the child component of the child path - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741322777a2372303.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论