简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Import JSX in React page to create navigation bar
P粉099145710
P粉099145710 2024-01-10 17:58:26
0
1
346

Edit 1: Original question: How to create a single-page application using React

Since the question is not specific enough and has been answered before, you need to learn React-routing from Imran Rafiq Rather's answer

Edit 2: Rewrite the question and reopen it for a more specific use case.

I'm following a tutorial to learn how to route pages using React-route. So far, I understand that I need to add the <Route> tag inside the createRoutesFromElements function of the createBrowserRouter() component. The code is as follows: 

const router = createBrowserRouter( 
createRoutesFromElements(
   <Route path="/" element={<RootLayout/>}>
        <Route index element={<Home/>}/>
   </Route>
))

In each "element=", pages created in a modular manner are imported. The content is as follows:

RootLayout.js from tutorial

export default function RootLayout(){
    return(
        <div className='root-layout'>
            <header>
                <nav>
                    <h1> Jobarouter </h1>
                    <NavLink to="/"> Home </NavLink>
                    <NavLink to="about"> About </NavLink>
                    <NavLink to="help"> Help </NavLink>
                    <NavLink to="careers"> Login </NavLink>
                </nav>
            </header>
            <main>
                <Outlet/>
            </main>
        </div>
    )
}

If I have an old component created by JSX React Bootstrap, the code is as follows:

NavbarLayout.js

const NavbarComp = () => {
   //navbar content
}

export default NavbarComp;

Then the routing will be like this: 

<header>
            <NavbarComp/>
        </header>

Why is the component not displayed on my page and there are no errors?

P粉099145710
P粉099145710

reply all(1)
P粉549986089
P粉5499860892024-01-11 16:48:05 1 floor

You are trying to put a JS component into a normal index.html file. 

<body>
  <Navbar\>
  <Gallery\>
</body>

This does not apply at all. Using a library like ReactJS, we've done all the groundwork with the ReactDOM.render(<App/>, document.querySelect('#root')) library, which is JavaScript internally itself. So in this case, single page application means we use an element with id='root' and put all the code in that element.

Therefore, this is not a correct approach. Launching a single-page application this way won't work, not to mention the subsequent problems.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！