suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Importieren Sie JSX in die React-Seite, um eine Navigationsleiste zu erstellen

Edit 1: Ursprüngliche Frage: So erstellen Sie eine Single-Page-Anwendung mit React

Da die Frage nicht spezifisch genug ist und bereits beantwortet wurde, müssen Sie das React-Routing aus der Antwort von Imran Rafiq Rather lernen

Bearbeiten 2: Schreiben Sie die Frage neu und öffnen Sie sie für einen spezifischeren Anwendungsfall erneut.

Ich folge einem Tutorial, um zu lernen, wie man Seiten mit React-route weiterleitet. Bisher ist mir klar, dass ich das Tag <Route> in die Funktion createRoutesFromElements der Komponente createBrowserRouter() einfügen muss: 

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

In jedem „element=" werden modular erstellte Seiten importiert. Der Inhalt ist wie folgt:

RootLayout.js aus dem 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>
    )
}

Wenn ich eine alte Komponente habe, die von JSX React Bootstrap erstellt wurde, lautet der Code wie folgt:

NavbarLayout.js

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

export default NavbarComp;

Dann sieht die Route so aus: 

<header>
            <NavbarComp/>
        </header>

Warum wird die Komponente nicht fehlerfrei auf meiner Seite angezeigt?

P粉099145710P粉099145710409 Tage vor469

Antworte allen(1)Ich werde antworten

  • P粉549986089

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

    您正在尝试将JS组件放入一个普通的index.html文件中。

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

    这根本不适用。使用像ReactJS这样的库，我们已经通过ReactDOM.render(<App/>, document.querySelect('#root'))库完成了所有的基础工作，它在内部就是JavaScript本身。因此，在这种情况下，单页面应用程序意味着我们使用一个具有id='root'的元素，并将所有的代码放在该元素中。

    因此，这不是一个正确的方法。以这种方式启动单页面应用程序是行不通的，更不用说后续的问题了。

    Antwort
    0
  • StornierenAntwort