Маршрутизатор React всегда отображает путь '/'

Я пытаюсь использовать реагирующий маршрутизатор v4, но маршрутизатор всегда отображает начальный путь ('/'). я использую

react: ^16.2.0

react-dom: ^16.2.0

react-router-dom: ^4.2.2

Когда я пытаюсь отобразить /#/account, он отображает Home вместо Account.

import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Home from "./components/Home/Home";
import Account from "./components/Account/Account";
import Layout from "./components/Layout";

const app = document.getElementById('app');

ReactDOM.render(
  <Router>
      <div>
        <Route exact path="/" render={() => (<div>Home</div>)} />
        <Route path="/account" render={() => (<div>Account</div>)} />
      </div>
  </Router>,
  app
)


reactjs react-router-dom react-router react-router-v4
person Deepak Bandi    schedule 02.12.2017    source источник

Ответы (5)


arrow_upward
4
arrow_downward

Один из способов обойти это — использовать <Switch> из react-router-dom. Вы можете импортировать его следующим образом:

import {Switch} from 'react-router-dom';

а затем оберните свой <Route> внутри <Switch>, я думаю, что хорошей идеей будет поместить "/" последним и указать компонент по умолчанию, например:

  <Router>
      <div>
        <Switch>
          <Route path="/account" render={() => (<div>Account</div>)} />
          <Route exact path="/" render={() => (<div>Home</div>)} />
          <Route component={NoMatch}/>
        </Switch>
     </div>
  </Router>

Вы можете прочитать больше о <Switch> здесь

person Aaqib    schedule 02.12.2017
comment
Я пробовал этот подход, не повезло. - person Deepak Bandi; 03.12.2017
comment
ты завернул <Route> в <Switch> ? ошибки в консоли? - person Aaqib; 03.12.2017
comment
так что после включения ‹Switch› первоначальный "/" тоже рендерится? - person Aaqib; 03.12.2017
comment
Да, независимо от того, что я ввожу в URL, он всегда отображает "/" - person Deepak Bandi; 03.12.2017
comment
Да, как-то странно. Точно удалил, все так же. - person Deepak Bandi; 03.12.2017
comment
если вы используете веб-пакет, то внутри webpack.config.js добавьте historyApiFallback: true - person Aaqib; 03.12.2017
comment
Давайте продолжим обсуждение в чате. - person Aaqib; 03.12.2017
comment
В чем проблема @DeepakBandi? - person tommyalvarez; 13.04.2018
comment
У меня тоже есть эта проблема. Ввожу ли я другой URL-адрес, использую ссылку и т. д. Он всегда отображает путь «/». Хотя адрес другой. Я не использую редукс. - person Cameron Hall; 26.07.2018

arrow_upward
1
arrow_downward

Я знаю, что это немного поздно, но столкнулся с той же проблемой и подумал поделиться со всеми.

Исправлено добавлением параметра "exact" в Route

<Route path="/contact-us" exact component={component-name} />
person aatif shaikh    schedule 16.07.2019

arrow_upward
1
arrow_downward

Это ожидаемое поведение, поскольку «/home» будет соответствовать как «/», так и «home», поэтому оба компонента видны, это можно решить, добавив параметр «exact» к вашему атрибуту маршрута «/» следующим образом:

<Route path="/" exact component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
person lokeshj    schedule 08.02.2020

arrow_upward
0
arrow_downward

Альтернативой использованию <BrowserRouter> является <HashRouter>, который использует хэш-часть URL-адреса (например, window.location.hash) для синхронизации вашего пользовательского интерфейса с URL-адресом.

См.: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

Поэтому в вашем примере вы просто импортируете HashRouter вместо этого

import { HashRouter as Router, Route } from 'react-router-dom'
person splusk    schedule 21.06.2018

arrow_upward
0
arrow_downward

Я немного опоздал на вечеринку, но я столкнулся с этой проблемой, и я уверен, что буду не последним.

В моем случае на одной странице был компонент со ссылкой на другую.

Например, это может быть <Button onClick={goToHomePage()} />Go Home</Button>component на странице учетной записи. Когда страница учетной записи отображается, goToHomePage() вызывается мгновенно, перенаправляя пользователя на домашнюю страницу. Это произойдет довольно быстро и немного запутает. Это также произойдет при правильной настройке маршрутизатора.

Я надеюсь, что это поможет кому-то в будущем!

person Sam    schedule 04.10.2019