在React页面中导入JSX以创建导航栏-PHP中文网问答

编辑1：原问题：如何使用React创建单页应用

由于问题不够具体，之前已经回答过，需要从Imran Rafiq Rather的回答中学习React-routing

编辑2：重写问题，重新打开以获取更具体的用例。

我正在按照教程学习如何使用React-route路由页面。到目前为止，我了解到需要在createBrowserRouter()组件的createRoutesFromElements函数内部添加标签，代码如下：

const router = createBrowserRouter( 
createRoutesFromElements(
   }>
        }/>
   
))

在每个"element="中，都导入了以模块化方式创建的页面。内容如下：

来自教程的RootLayout.js

export default function RootLayout(){
    return(
        
            
                
                     Jobarouter 
                     Home 
                     About 
                     Help 
                     Login 
                
            
            
                
            
        
    )
}

如果我有一个由JSX React Bootstrap创建的旧组件，代码如下：

NavbarLayout.js

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

export default NavbarComp;

那么路由将是这样的：

为什么组件在我的页面上没有显示，也没有任何错误？

全部回复(1)

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

添加回复