search

Home  >  Q&A  >  body text

Import JSX in React page to create navigation bar

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粉099145710P粉099145710324 days ago403

reply all(1)I'll reply

  • P粉549986089

    P粉5499860892024-01-11 16:48:05

    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.

    reply
    0
  • Cancelreply