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?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您正在尝试将JS组件放入一个普通的
index.html文件中。这根本不适用。使用像ReactJS这样的库，我们已经通过
ReactDOM.render(<App/>, document.querySelect('#root'))库完成了所有的基础工作，它在内部就是JavaScript本身。因此，在这种情况下，单页面应用程序意味着我们使用一个具有id='root'的元素，并将所有的代码放在该元素中。因此，这不是一个正确的方法。以这种方式启动单页面应用程序是行不通的，更不用说后续的问题了。