ссылки маршрутизатора не загружают компонент

Question

  <div className="app">
        <Router>
          <Link
            to="/dashboard"
            style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}>
            Passing Props
          </Link>
          <Link
            to="/"
            style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}>
            Home
          </Link>
          <Link
            to="/signin"
            style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}>
            signin
          </Link>
          <Link
            to="/signup"
            style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}
          >
            signup
          </Link>
          <Switch>
            <Route
              path="/dashboard"
              component={() => <AWSConnection topic={this.state.topic} />}
            />
            <Route path="/" />
            <Route path="/signup" component={SignInForm}/>
            <Route path="/signin" component={SignUpForm}/>
          </Switch>
        </Router>

 </div>

работают только главная страница и панель управления, остальные два ничего не показывают

мой импорт

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

когда я нажимаю "Дом", он переходит на главную, а когда я нажимаю на панель управления, он переходит на панель управления, но когда я нажимаю вход или регистрацию, ничего не происходит. Я вижу изменение URL-адреса на /signin и /singup, но ничего не отображается. Я тестировал фиктивный компонент при входе и входе в систему, все тот же, он не может загрузить фиктивный компонент

Answer 1

Используйте "точную" опору. Ваш маршрутизатор проходит через все ваши определенные маршруты и возвращает первое доступное совпадение, в этом случае "/" является первым доступным совпадением для всех ваших маршрутов.

Answer 2

Вы можете либо установить точную опору на маршрутизаторе, либо изменить свои маршруты на:

<Switch>
  <Route 
    path="/dashboard" 
    component={() => <AWSConnection topic={this.state.topic} />}
  />
  <Route path="/signup" component={SignInForm} />
  <Route path="/signin" component={SignUpForm} />
  <Route path="/" />
</Switch>

Компонент Switch вернет первый совместимый маршрут, и / совместим со всем.

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

Answer 3

Попробуйте использовать "точное" свойство в каждом компоненте Route:

<Route path="/signin" exact component={SignUpForm}/>

В результате ваш Switch будет отображать только тот компонент, который вам нужен.