简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Import JSX dalam halaman React untuk membuat bar navigasi
P粉099145710
P粉099145710 2024-01-10 17:58:26
0
1
342

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粉099145710
P粉099145710

membalas semua(1)
P粉549986089
P粉5499860892024-01-11 16:48:05 Tingkat 1

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.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！