React ile Route + Map yapısı kurmak
Problem componentlerden turnakları kaldırınca çözüldü :)
Herkese merhaba, reactta henüz yeniyim ve aşağıdaki kod örneğinde şöyle birşey yapmak istiyorum ama çözümünü bulamadım yardımcı olur musunuz ?
İstediğim şey data değişkenini map ile döngüye sokarak aşağıdaki Route yapısını oluşturmak istiyorum ama ne yaparsam yapayım hata veriyor çözümünü nasıl sağlayabilirim acaba ?
Aşağıdaki kod şu anda çalışıyor ama datayı map içerisine aldığımda çalıştıramıyorum.
const data=[
{
path:"/",
component:"<Home />"
},
{
path:"/hakkimizda",
component:"<Hakkimizda />"
},
{
path:"/hizmetlerimiz",
component:"<Hizmetlerimiz />"
}
]
return (
<Router>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/hakkimizda" element={<Hakkimizda />} />
<Route path="/hizmetlerimiz" element={<Hizmetlerimiz />} />
</Routes>
</Router>
);
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";
const data = [
{
path: "/",
component: <Home />
},
{
path: "/about",
component: <About />
}
];
export default function App() {
const routes = data.map(({ path, component }, key) => (
<Route exact path={path} element={component} key={key} />
));
return (
<div className="App">
<h1>React App</h1>
<Router>
<Routes>{routes}</Routes>
</Router>
</div>
);
}