React router изменяет URL, но не просматривает

Ответ 1

Вам нужно указать exact атрибут для вашего indexRoute, иначе для четного /details маршрута он все равно будет совпадать с /. Также попробуйте импортировать Route из react-router-dom

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route exact path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

ОБНОВИТЬ:

Еще одна вещь, которую вам нужно сделать, это присоединить ваш компонент Users с помощью withRouter. Вы должны использовать withRouter только тогда, когда ваш компонент не получает Router props,

Это может произойти в случаях, когда ваш компонент является вложенным дочерним элементом компонента, отображаемого маршрутизатором, или вы не передали ему реквизиты маршрутизатора, или когда компонент вообще не связан с маршрутизатором и отображается как отдельный компонент от Маршруты.

В Users.js добавь

import {withRouter} from 'react-router';

.........
export default withRouter(Users)

DOCS

Ответ 2

Вам просто нужно обернуть компоненты внутри с помощью Router.

<Route exact path = "/mypath" component = { withRouter (MyComponent)}/>

Вот пример файла App.js:

...
import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={withRouter(Home)} />
          <Route exact path="/profile" component={withRouter(Profile)} />
        </Switch>
      </Router>
    );
  }
}

export default App;

ИЛИ ЖЕ

Вы также можете перенести компонент в withRouter перед экспортом, но тогда вы должны обеспечить несколько других вещей.

export default withRouter(Profile)

Ответ 3

При использовании Redux у меня были аналогичные проблемы, когда URL-адрес обновлялся в адресной строке, но приложение не загружало соответствующий компонент. Я смог решить, добавив withRouter к экспорту:

import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

export default withRouter(connect(mapStateToProps)(MyComponentName))

Ответ 4

Вам нужно добавить точный указательный маршрут и вместо того, чтобы включать эти компоненты Route в div, используйте Switch from response-router-dom для переключения между маршрутами.

import React from "react";
import ReactDOM from "react-dom";
import { Route, Switch } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((
  <div>
    <Switch>
        <Route path="/" component={Users} exact/>
        <Route path="/details" component={Details} />
    </Switch>
  </div>
), document.getElementById('app'))

Ответ 5

Вы должны проверить это: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

Поэтому это определенно не " Users или " Details, потому что они напрямую отображаются в <Route>, и location будет передано в props.

Мне интересно, зачем вам <div> между <BrowserRouter> и <Route>? Удалите это и сообщите мне, если это сработает.

Ответ 6

У меня была аналогичная проблема с React Router версии 4:

Нажимая на компонент <Link/>, URL-адрес изменится, но нет.

Один из мнений заключался в использовании PureComponent а не Component (импортированного из react), и это было причиной.

Заменив все компоненты, обработанные маршрутом, которые использовали PureComponent для Component, моя проблема была решена.

(Источник разрешения: https://github.com/ReactTraining/react-router/issues/4975#issuecomment-355393785)

Ответ 7

Я тоже встретил проблему.

https://github.com/chengjianhua/templated-operating-system

И я пробовал решения, сделанные Шубхамом Хатри, но это не работает.

Я решил эту проблему, может быть, может вам помочь.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

Согласно указанной выше направляющей документа, при использовании PureComponent или использовать инструменты государственного управления, как redux, mobx... Он может блокировать обновление маршрута. Проверьте свой компонент маршрута, убедитесь, что вы не заблокировали повтор вашего компонента.

Ответ 8

Попробуй это,

import React from "react";

import ReactDOM from "react-dom";
import Users from "./components/Users";
import { Router, Route } from "react-router";


import Details from "./components/Details";

ReactDOM.render((
  <Router>
        <Route path="/" component={Wrapper} >
            <IndexRoute component={Users} />
            <Route path="/details" component={Details} />
        </Route>
  </Router>
), document.getElementById('app'))

Ответ 9

Hmm нет никакого переключателя, чтобы фактически переключать представления.

это то, как я использую маршрутизатор для переключения с сайта Landin на главный сайт

//index.jsx    
ReactDOM.render( (<BrowserRouter><App/></BrowserRouter>), document.getElementById('root') );


//App.jsx
render()
{
    return <div>
        <Switch>
            <Route exact path='/' component={Lander}/>
            <Route path='/vadatajs' component={Vadatajs}/>
        </Switch>
    </div>
}

https://jsfiddle.net/Martins_Abilevs/4jko7arp/11/

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

https://fiddle.jshell.net/terda12/mana88Lm/

возможно, ключ решения скрыт в строке для основной функции рендеринга.

Router.run(routes, function(Handler) {
    React.render(<Handler />, document.getElementById('container'));
});

Ответ 10

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

Вам нужно использовать функцию componentWillReceiveProps в вашем компоненте.

Первый раз щелкнул ссылку, вызвав URL. www.example.com/content1/componentDidMount() запущен.

Теперь, когда вы нажимаете другую ссылку, говорите, что www.example.com/content2/вызывается тот же компонент, но на этот раз изменяется проп, и вы можете получить доступ к этому новому опору в componentWillReceiveProps (nextProps), который вы можете использовать для вызова API или сделать состояние пустым и получить новый. данные.

componentWillReceiveProps(nextProps){
     //call your API and update state with new props
}

Ответ 11

У меня была похожая проблема с условным макетом:

class LayoutSwitcher extends Component {
  render () {
    const isLoggedIn = this.props.isLoggedIn
    return (
      <React.Fragment>
        { isLoggedIn
          ? <MainLayout {...this.props} />
          : <Login />
        }
      </React.Fragment>
    )
  }
}

и переписал условия так:

  render () {
    const isLoggedIn = this.props.isLoggedIn
    if (isLoggedIn) {
      return <MainLayout {...this.props} />
    }
    return <Login />
  }

Это решило это. В моем случае кажется, что контекст был утерян.

Ответ 12

удалите <div> и ваша проблема будет решена