v2.5.2
Giriş yap

React-router komponentleri yüklemiyor

Anonim
342 defa görüntülendi
import HeaderComp from "./components/HeaderComp";
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import MainPage from "./components/MainPage";
import HelpPage from "./components/HelpPage";
import DownloadPage from "./components/DownloadPage";
import SearchPage from "./components/SearchPage";
import DonatePage from "./components/DonatePage";

function App() {
  return (
    <div>
      <HeaderComp />
      <main>
        <div>
          <BrowserRouter>
            <Switch>
              <Route path="/" exact>
                <MainPage />
              </Route>
              <Route path="/download" exact>
                <DownloadPage />
              </Route>
              <Route path="/search" exact>
                <SearchPage />
              </Route>
              <Route path="/help" exact>
                <HelpPage />
              </Route>
              <Route path="/donate" exact>
                <DonatePage />
              </Route>
            </Switch>
          </BrowserRouter>
        </div>


      </main>
    </div>
  );
}

export default App;

Kodlarım bu şekilde, urlyi yazınca sorun yok komponent yükleniyor fakat headerdaki navlinklere tıklayınca yüklenmiyor

Cevap yaz
Cevaplar (1)
oguzhanbyram
1117 gün önce

Header BrowserRouter içinde olmadığı için olabilir bir de alttaki gibi denermisin.

import HeaderComp from "./components/HeaderComp";
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import MainPage from "./components/MainPage";
import HelpPage from "./components/HelpPage";
import DownloadPage from "./components/DownloadPage";
import SearchPage from "./components/SearchPage";
import DonatePage from "./components/DonatePage";

function App() {
  return (
      <BrowserRouter>
        <div>
          <HeaderComp />
          <main>
            <div>
                <Switch>
                  <Route path="/" exact>
                    <MainPage />
                  </Route>
                  <Route path="/download" exact>
                    <DownloadPage />
                  </Route>
                  <Route path="/search" exact>
                    <SearchPage />
                  </Route>
                  <Route path="/help" exact>
                    <HelpPage />
                  </Route>
                  <Route path="/donate" exact>
                    <DonatePage />
                  </Route>
                </Switch>
            </div>
    
    
          </main>
        </div>
    </BrowserRouter>
  );
}

export default App;