Reactjs маршрутизация, вызывающая проблемы с отрисовкой страницы

Question

У меня есть следующее приложение. js:

function App() {
  return (
    <div className="App">
    <Header></Header>
    <HomePage></HomePage>             
    </div>
  );
}

Любой, кто получает доступ к веб-сайту, по умолчанию должен видеть домашнюю страницу первым.

У меня есть меню навигации со следующей информацией о маршрутизации :

<Router>
<Switch>                                                
    <Route path='/login' component={Authentication} />                                              
</Switch>
</Router>

Когда я нажимаю ссылку меню входа в систему, загружается страница аутентификации, но я также могу видеть домашнюю страницу ниже при прокрутке вниз в браузере. Как мне загрузить только страницу, на которую ссылается маршрутизатор?

РЕШЕНИЕ:

Добавлен следующий маршрут к маршрутизатору

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

Answer 1

Другой путь в Route показывает другую страницу (атрибут компонента в Route), вот демонстрация и документация по реактивному маршрутизатору, возможно, вам поможет. Удачи!

• response-router-v4-demo
• response router docs

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

Answer 2

Используйте точное значение для этой проблемы.

    <Route exact path="/">
        <Home />
    </Route>

Answer 3

Вы должны добавить ключевое слово «точный путь» в раздел «Маршрут» следующим образом: <Route exact path="/" component={Home} /> Если вы не используете «точный», он отобразит весь компонент, содержащий «/".

»