NodeJS Error The above error occurred in the component
تبليغيرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
This is my standard bootstrap code snippet.
I want to use the bootstrap menu
I had previously written these codes in PHP and I just started learning NodeJS and I want to implement it in NodeJS.
I create this function in NodeJS
import React from ‘react’;
function PageHeader() {
return <React.StrictMode>
<svg xmlns=”http://www.w3.org/2000/svg” style=”display: none;”>
<symbol id=”home” viewBox=”0 0 16 16″>
<path d=”M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z”></path>
</symbol>
<symbol id=”speedometer2″ viewBox=”0 0 16 16″>
<path d=”M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z”></path>
<path fillRule=”evenodd” d=”M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z”></path>
</symbol>
<symbol id=”table” viewBox=”0 0 16 16″>
<path d=”M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z”></path>
</symbol>
<symbol id=”people-circle” viewBox=”0 0 16 16″>
<path d=”M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z”></path>
<path fillRule=”evenodd” d=”M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z”></path>
</symbol>
<symbol id=”grid” viewBox=”0 0 16 16″>
<path d=”M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z”></path>
</symbol>
<symbol id=”logout” viewBox=”0 0 16 16″>
<path d=”M 74.163 0 l -7.07 7.071 l 3.892 3.892 h -9.455 C 49.658 10.963 40 20.622 40 32.493 v 18.713 h 10 V 32.493 c 0 -6.357 5.172 -11.53 11.529 -11.53 h 9.455 l -3.892 3.892 l 7.07 7.071 l 15.964 -15.963 L 74.163 0 z” style=”stroke: none; stroke-width: 1; stroke-dasharray: none; strokeLinecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fillRule: nonzero; opacity: 1;” transform=” matrix(1 0 0 1 0 0) ” strokeLinecap=”round”></path>
<path fillRule=”evenodd” d=”M 76.594 90 H 13.406 C 6.014 90 0 83.986 0 76.594 V 13.406 C 0 6.014 6.014 0 13.406 0 h 28.119 v 10 H 13.406 C 11.528 10 10 11.528 10 13.406 v 63.188 C 10 78.472 11.528 80 13.406 80 h 63.188 C 78.472 80 80 78.472 80 76.594 V 38.159 h 10 v 38.435 C 90 83.986 83.986 90 76.594 90 z” style=”stroke: none; stroke-width: 1; stroke-dasharray: none; strokeLinecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fillRule: nonzero; opacity: 1;” transform=” matrix(1 0 0 1 0 0) ” strokeLinecap=”round”></path>
</symbol>
</svg>
<header>
<div className=”px-3 py-2 bg-dark text-white”>
<div className=”container”>
<div className=”d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start”>
<a href=”/” className=”d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none”>
<img src=”img/zig210-90.png” style=”width: 185px;” alt=”logo” />
</a>
<ul className=”nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small”>
<li>
<a href=”#” className=”nav-link text-secondary”>
<svg className=”bi d-block mx-auto mb-1″ width=”24″ height=”24″ style=”fill: white;”>
<use xlinkHref=”#home”></use>
</svg>
home
</a>
</li>
<li>
<a href=”#” className=”nav-link text-white”>
<svg className=”bi d-block mx-auto mb-1″ width=”24″ height=”24″ style=”fill: white;”>
<use xlinkHref=”#speedometer2″></use>
</svg>
Desk
</a>
</li>
<li>
<a href=”#” className=”nav-link text-white”>
<svg className=”bi d-block mx-auto mb-1″ width=”24″ height=”24″ style=”fill: white;”>
<use xlinkHref=”#table”></use>
</svg>
table
</a>
</li>
<li>
<a href=”#” className=”nav-link text-white”>
<svg className=”bi d-block mx-auto mb-1″ width=”24″ height=”24″ style=”fill: white;”>
<use xlinkHref=”#grid”></use>
</svg>
grid
</a>
</li>
<li>
<a href=”#” className=”nav-link text-white”>
<svg className=”bi d-block mx-auto mb-1″ width=”24″ height=”24″ style=”fill: white;”>
<use xlinkHref=”#people-circle”></use>
</svg>
people
</a>
</li>
<li>
<a href=”logout.php” className=”nav-link text-white”>
<svg className=”bi d-block mx-auto mb-1″ width=”24″ height=”24″ style=”fill: white;”>
<use xlinkHref=”#logout”></use>
</svg>
logout
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
</React.StrictMode>;
}
export default PageHeader;
When I run it, it shows these errors
The above error occurred in the component:
at path
at symbol
at svg
at PageHeader
at App
react-dom.development.js:18687 The above error occurred in the component:
at img
at a
at div
at div
at div
at header
at PageHeader
at App
6react-dom.development.js:18687 The above error occurred in the component:
at svg
at a
at li
at ul
at div
at div
at div
at header
at PageHeader
at App
How do I fix the errors?
أضف إجابة