У меня возникли проблемы изменения вида в реакцию с маршрутизации. Кажется, я попробовал все, что я могу погуглить, но не смог. Я только хочу показать список пользователей, и нажав на каждый пользователь должен перейти на страницу детальной информации. Здесь есть маршрутизатор:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";
ReactDOM.render((
<BrowserRouter>
<div>
<Route path="/" component={Users} />
<Route path="/details" component={Details} />
</div>
</BrowserRouter>
), document.getElementById('app'))
Когда я использовать URL-адрес /детали мой браузер переходит по этому URL-адресу, но не меняет вид. Любой другой маршрут, кидает 404 так это, кажется, признает маршрут, но не обновить.
Нужно указать атрибут "точное" для indexRoute, в противном случае для даже подробности маршрута будет еще матч с /
. Также попробуйте импортировать "маршрут" с реагировать-маршрутизатор-дом
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'))
Обновление:
Другое дело, что вам нужно сделать, это прикрепить пользователям компонента с withRouter
. Вы должны использовать withRouter
только тогда, когда ваш компонент не получает бутафории маршрутизатор`,
Это может произойти в тех случаях, когда ваш компонент вложенный дочерний компонент, оказываемых маршрутизатор или вы еще'т сдал маршрутизатор реквизит к нему или, когда компонент не связан с роутера, и представляется как отдельный компонент с маршрутов.
В Users.js добавить
import {withRouter} from 'react-router';
.........
export default withRouter(Users)
Вы просто должны обернуть компоненты внутри withRouter.
<маршрут точный путь=то"/Путь mypath" и компонент={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;
Дополнительно
Если вы используете маршрутизатор реагировать, componentWillReceiveProps будет вызван всякий раз, когда изменения URL-адреса.
componentWillReceiveProps(nextProps) {
var currentProductId = nextProps.match.params.productId;
var nextProductId = nextProps.match.params.productId; // from the new url
...
}
Примечание
Кроме того, вы можете также обернуть компонента в withRouter перед экспортом, но тогда вы должны обеспечить некоторые другие вещи. Я обычно пропускаю этот шаг.
export default withRouter(Profile)
При использовании Redux и <ссылка>
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(MyComponentName))
Вам нужно добавить точное маршруту индекса и вместо того, чтобы заключить те по маршруту компонентов по блоку div, использовать переключатель от реагировать-маршрутизатор-дом для переключения между маршрутами.
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'))
У меня была аналогичная проблема с роутером версию реагируют 4:
Нажав на `<ссылка /> компонент, URL-адрес будет меняться, но вид не'т.
Одно из мнений, используя PureComponent
, а не компонент
(импортирован из реагировать
) и что послужило причиной.
Путем замены всех маршрутов оказываемых компонентов, используя PureComponent
до компонент
, мой вопрос был решен.
(Источник разрешение: https://github.com/ReactTraining/react-router/issues/4975#issuecomment-355393785)
Мда нет переключатель на самом деле переключение между видами.
это, как я использовать маршрутизатор, чтобы перейти со страницы Ландин на основной сайт
//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://fiddle.jshell.net/terda12/mana88Lm/
может быть, ключ решение кроется в линии для основной функции render ..
Router.run(routes, function(Handler) {
React.render(<Handler />, document.getElementById('container'));
});
Я был перед подобной проблемы я решить, нравится это, пожалуйста, взгляните, я надеюсь, что это's работает.
Вам нужно использовать componentWillReceiveProps функция в компоненте.
нажал ссылку первый раз по телефону www.example.com/content1 URL-адрес/ componentDidMount() выполняется.
Теперь, когда вы выберите другую ссылку сказать www.example.com/content2/ одного компонента называется но на этот раз опора меняется и вы можете открыть эту новую опору под componentWillReceiveProps(nextProps), которые вы можете использовать для вызова API или сделать пробел и получить новые данные.
componentWillReceiveProps(nextProps){
//call your API and update state with new props
}
Попробуйте это,
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'))
Я тоже встретил беду.
https://github.com/chengjianhua/templated-operating-system
И я пробовал решения, действия приказа по Шубхам Хатри, но это вовсе'т работу.
Я решил эту проблему, возможно, смогут помочь вам.
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md
Согласно вышеуказанного документа, когда вы используете PureComponent
или использовать с системой государственного управления, как возвращение
, mobx
... он может блокировать обновление вашего маршрута. Проверьте свой компонент маршрут, убедитесь, что вы ничего'т блокировать повторно ОД компонента.
У меня была аналогичная проблема с условным макетом:
LayoutSwitcher класс расширяет компонент { рендер () { константный isLoggedIn = это.реквизит.isLoggedIn возвращение ( <реагируют.Фрагмент> { isLoggedIn ? <MainLayout {...этого.реквизит} /> : <логин /> } </реагировать.Фрагмент> ) } }
и переписал условия следующим образом:
рендер () { константный isLoggedIn = это.реквизит.isLoggedIn если (isLoggedIn) { возвращение <MainLayout {...этого.реквизит} /> } возвращение <логин /> }
Это решило его. В моем случае, кажется, что контекст был потерян.
У меня была аналогичная проблема, но с различной структурой. Я'ве добавил один маршрутизатор, который будет обрабатывать все маршруты, я'вэ используемый компонент переключатель для того чтобы переключить вид. Но на самом деле, это не'т. Только URL-адрес меняется, но не смотреть. Поводом для этого стала компонентом, используемым внутри компонента боковой панели, которая была за пределами компонент маршрутизатор. (Да, я'вэ экспортировала боковой панели с"withRouter " и; не работал). Так, решением было перемещение моего компонента на боковой панели, которая содержит все компоненты ссылке в моем роутере.
Проблема в моем сшиватели, они находятся за пределами моего роутера
<div className="_wrapper">
<SideBar /> // Holds my all linkers
<Router>
<Switch>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</Router>
</div>
Решением было перемещение моего сшиватели в мой маршрутизатор
<div className="_wrapper">
<Router>
<SideBar /> // Holds my all linkers
<Switch>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</Router>
</div>
Вы должны проверить это: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md
Поэтому он'ы наверняка не "Пользователи" или "детали", потому что они непосредственно оказываемые в <маршрут>
, и место
будет передан пропсами.
Мне интересно, зачем вам в <див>
между <BrowserRouter>
и <маршрут>
? Удалите эту и дайте мне знать, если это работает.