cari

Rumah  >  Soal Jawab  >  teks badan

Import JSX dalam halaman React untuk membuat bar navigasi

Sunting 1: Soalan asal: Bagaimana untuk membuat aplikasi satu halaman menggunakan React

Memandangkan soalan itu tidak cukup spesifik dan telah dijawab sebelum ini, anda perlu belajar React-routing daripada jawapan Imran Rafiq Rather

Sunting 2: Tulis semula soalan dan buka semula untuk kes penggunaan yang lebih khusus.

Saya mengikuti tutorial untuk mengetahui cara menghalakan halaman menggunakan React-route. Setakat ini, saya faham bahawa saya perlu menambah teg <Route> dalam fungsi createRoutesFromElements bagi komponen createBrowserRouter() Kodnya adalah seperti berikut: 

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

Dalam setiap "elemen=", halaman yang dibuat secara modular diimport. Kandungannya adalah seperti berikut:

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

Jika saya mempunyai komponen lama yang dicipta oleh JSX React Bootstrap, kodnya adalah seperti berikut:

NavbarLayout.js

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

export default NavbarComp;

Maka laluannya akan menjadi seperti ini: 

<header>
            <NavbarComp/>
        </header>

Mengapa komponen tidak muncul di halaman saya tanpa sebarang ralat?

P粉099145710P粉099145710324 hari yang lalu402

membalas semua(1)saya akan balas

  • P粉549986089

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

    Anda cuba memasukkan komponen JS ke dalam fail index.html biasa. 

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

    Ini tidak terpakai sama sekali. Dengan perpustakaan seperti ReactJS, kami telah melakukan semua kerja asas melalui perpustakaan ReactDOM.render(<App/>, document.querySelect('#root')), iaitu JavaScript itu sendiri secara dalaman. Jadi, dalam kes ini, aplikasi halaman tunggal bermakna kita menggunakan satu elemen dengan id='root' dan meletakkan semua kod dalam elemen itu.

    Jadi ini bukan pendekatan yang betul. Melancarkan aplikasi satu halaman dengan cara ini tidak akan berfungsi, apatah lagi masalah seterusnya.

    balas
    0
  • Batalbalas