简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
在React頁面中匯入JSX以建立導覽欄
P粉099145710
P粉099145710 2024-01-10 17:58:26
0
1
345

編輯1： 原問題：如何使用React建立單頁應用程式

由於問題不夠具體，之前已經回答過，需要從Imran Rafiq Rather的回答中學習React-routing

編輯2： 重寫問題，重新開啟以獲取更具體的用例。

我正在按照教學學習如何使用React-route路由頁面。到目前為止，我了解到需要在createBrowserRouter()元件的createRoutesFromElements函數內部加上<Route>標籤，程式碼如下：

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

在每個"element="中，都導入了以模組化方式建立的頁面。內容如下：

來自教學的RootLayout.js

# 
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>
    )
}

如果我有一個由JSX React Bootstrap創建的舊元件，程式碼如下：

NavbarLayout.js

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

export default NavbarComp;

那麼路由將會是這樣的：

<header>
            <NavbarComp/>
        </header>

為什麼元件在我的頁面上沒有顯示，也沒有任何錯誤？

P粉099145710
P粉099145710

全部回覆(1)
P粉549986089
P粉5499860892024-01-11 16:48:05 1樓

您正在嘗試將JS元件放入一個普通的index.html檔案中。 

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

這根本不適用。使用像ReactJS這樣的函式庫，我們已經透過ReactDOM.render(<App/>, document.querySelect('#root'))庫完成了所有的基礎工作，它在內部就是JavaScript本身。因此，在這種情況下，單頁面應用程式意味著我們使用一個具有id='root'的元素，並將所有的程式碼放在該元素中。

因此，這不是一個正確的方法。以這種方式啟動單頁應用程式是行不通的，更不用說後續的問題了。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！