Блог

Мой проект React App.js файл имеет маршруты, подобные таким:

 <div>
        <Background />
        <Navbarr />
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/news" component={News} />
          <Route path="/reserve" component={Reserve} />
          <Route path="/admin" component={Admin} />
        </Switch>
</div>
  

В моем компоненте Navbarr у меня есть ссылки, которые задают маршруты, например:

 <Nav.Link
    href="/news"
    name="news"
    active={active === "/news"}
    onClick={() => setActive("/news")} 
>
News
</Nav.Link>
  

Когда я нажимаю на любую из ссылок, я бы хотел, чтобы это просто изменило компонент в моем <Switch>. Вместо этого, похоже, перезагружается все тело html (мой фоновый компонент мигает, даже если он имеет ту же картинку).

Есть ли способ сделать это?

Вы можете использовать react-router-dom ‘s Link и использовать to prop вместо href использования маршрутизации на стороне клиента

 import { Link } from "react-router-dom";

<Link
    to="/news"
    name="news"
    active={active === "/news"}
    onClick={() => setActive("/news")} 
>
News
</Link>
  

В качестве альтернативы вы можете использовать as поддержку React-bootstrap

 import { Link } from "react-router-dom";

<Nav.Link
  as={Link} // --> render as react-router-dom Link
  to="/news"
  name="news"
  active={active === "/news"}
  onClick={() => setActive("/news")}
>
  News
</Nav.Link>