Konfiguruję podstawowy pasek nawigacyjny, ma tylko kilka przycisków, a nie skomplikowany dziennik ani cokolwiek. Kiedy mam ten pasek nawigacyjny wewnątrz przełącznika, żaden inny komponent nie ładuje się, co oznacza, że nie mogę zawijać paska nawigacyjnego między niektórymi komponentami, kiedy mam pasek nawigacyjny poza przełącznikiem, to działa i mogę po prostu sprawdzić, czy props.match.location etc to „/” i nie ładuję go na stronie głównej, więc znalazłem obejście, ale co może powodować ten błąd lub czy jest to oczekiwane zachowanie, podejrzewam moje dzikie trasy, ale nie jestem w 100% pewien co. Gdzie używam navbar


const App = () => {
    return (
        <div>
            <Router>
                <Switch>
                    <Route component={theNavbar} />

                    <Route exact path="/" component={Home} />

                    <Route exact path="/api/:city/electronics" component={Electronics} />
                    <Route exact path="/api/:city/labour" component={Labour} />

                    <Route exact path="/api/posts/item/:id" component={ItemDetails} />

                    <Route exact path="/create/:city/:category" component={CreatePost} />
                </Switch>
            </Router>
        </div>
    );
};
1
user12551065 15 marzec 2020, 04:13

2 odpowiedzi

Najlepsza odpowiedź

Jest to całkowicie oczekiwane zachowanie, spowodowane kilkoma czynnikami. Pierwsza to Switch, a druga to dopasowanie wszystkiego Route do nawigacji.

Switch

Renderuje pierwsze dziecko <Route> lub <Redirect>, które pasuje do Lokalizacja.

Wszystkie kolejne dopasowania nie będą w ogóle renderowane.

Route path

Trasy bez ścieżki zawsze pasują.

<Route component={theNavbar} />

Ta trasa pasuje do wszystkich lokalizacji i dlatego zawsze będzie pasować. Umieszczenie na liście jako pierwsze w Switch oznacza, że zawsze będzie renderowane.

Rozwiązaniem, aby zawsze renderować jakiś komponent nawigacji, jednocześnie dopasowując inne trasy, jest przeniesienie tego komponentu poza Switch, ale nadal w obrębie Router.

0
Drew Reese 15 marzec 2020, 03:27

Jest to oczekiwane zachowanie. Zgodnie z dokumentacją React Router:

Trasy bez ścieżki zawsze pasują.

Więc twój NavBar będzie zawsze dopasowany w <Switch> i żaden z pozostałych komponentów nie będzie renderowany.

0
Daniel Bank 15 marzec 2020, 02:58