Вопросы с тегами [react-router]

0

голосов
1

ответ
8

Просмотры

ReactJS - После того, как компонент крепления необходимо импортировать / повторно запустите локальный файла JavaScript

Нужно импортировать «validation.js» файл внутри другого файла JavaScript в reactjs раз основной файл визуализации метод завершает его выполнения импорта»./Validations'; должен вынести этот JS файла, как только основной компонент визуализирует способ завершить выполнение
Sriram Karthick
1

голосов
1

ответ
1k

Просмотры

Ленивые Загрузка маршрутов в React С машинопись AsyncComponent

Я пытаюсь ленивыми маршруты нагрузки в React путем реализации класса AsyncCompoment как описано здесь Code Расщепление Создать Реагировать App. Ниже функция ES6 asyncComponent из учебника: импорт React, {Компонент} из «реагируют»; экспорт функция по умолчанию asyncComponent (importComponent) {класса AsyncComponent расширяет компонент {конструктор (реквизит) {супер (реквизит); this.state = {компонента: нуль}; } Асинхронной componentDidMount () {сопз {по умолчанию: компонент} = ждут importComponent (); this.setState ({компонента: компонент}); } Визуализации () {константный C = this.state.component; вернуться C? : ноль; }} Вернуть AsyncComponent; } I» ве написал эту функцию в машинописи и может подтвердить, что компоненты действительно загружается лениво. Вопрос я сталкиваюсь в том, что они не оказаны. Я был в состоянии определить, что объект компоненты всегда определен в componentDidMount крючке: //AsyncComponent.tsx асинхронной componentDidMount () {сопз {по умолчанию: компонент} = ждет importComponent (); this.setState ({компонента: компонент}); } Объект возвращается из функции importComponent обладает следующими свойствами: {MyComponent: класс MyComponent: F, __esModule: истинно} Я изменил метод componentDidMount принять первое свойство этого объекта, который является классом MyComponent. После этого изменения моего проект теперь ленивая загрузки компонентов и делают их правильно. асинхронное componentDidMount () {константный компонент = ждет importComponent (); this.setState ({компонента: компонент [Object.keys (компонент) [0]]}); } Моя догадка, что я не написал эту строку правильно в машинописи: Const {по умолчанию: компонент} = ждут importComponent (); Я вызываю метод asyncComponent как так: Const MyComponent = asyncComponent (() => импорт (./ компоненты / MyComponent)); Кто-нибудь знает, как реализовать AsyncComponent в машинописи? Я не уверен, если просто получаю индекс 0 на объекте esModule правильный способ сделать это. Const {по умолчанию: компонент} = ждут importComponent (); Я вызываю метод asyncComponent как так: Const MyComponent = asyncComponent (() => импорт (./ компоненты / MyComponent)); Кто-нибудь знает, как реализовать AsyncComponent в машинописи? Я не уверен, если просто получаю индекс 0 на объекте esModule правильный способ сделать это. Const {по умолчанию: компонент} = ждут importComponent (); Я вызываю метод asyncComponent как так: Const MyComponent = asyncComponent (() => импорт (./ компоненты / MyComponent)); Кто-нибудь знает, как реализовать AsyncComponent в машинописи? Я не уверен, если просто получаю индекс 0 на объекте esModule правильный способ сделать это.
Mike Lunn
0

голосов
0

ответ
4

Просмотры

Реагировать-Testing-Library - Упаковочный компонент с Redux и маршрутизатором

Я пытаюсь настроить файл тест для визуализации маршрута / страниц на моем приложении. Я пытаюсь обернуть все с Redux и маршрутизатором, и это то, что у меня есть: импорт Реагировать из «реагировать»; импорт {оказывают} от «среагировать тестирования-библиотека»; импорт {} createStore от 'Redux'; импорта {} Провайдер от 'среагировать-Redux'; импорт редуктор от «../../store/reducer»; импорт {Ссылка, маршрут, маршрутизатор, коммутатор} от «реагировать-маршрутизатор-дом» импорта {createMemoryHistory} из «истории» импорта ViewNode из «../Pages/ViewNode»; Const customRender = (щ, {путь = '/', история = createMemoryHistory ({initialEntries: [путь]}), InitialState, магазин = createStore (редуктор, InitialState), ... опции} = {}) => ({ ... оказывать ({щ}, варианты), история,}); тест ( 'может сделать с Redux и маршрутизатором', () => {сопз {getByTestId} = customRender ({маршрут: '/server/prod/some.server.name.com'}); ожидать (getByTestId (» страниц контента.)) toBeVisible ()}) Тогда я получаю следующее сообщение об ошибке: ошибка: неперехваченным [TypeError: не удается прочитать свойство „Params“ неопределенной] причина этого бросает ошибку, потому что не может найти Реагировать маршрутизатор PARAMS , Это провал в конструкторе компоненты при Im инициализации состояния: this.state = {модальный: ложь, activeTab: '1', imageStatus: "загрузка", ENV: props.match.params.env, // неудачи здесь NODENAME: реквизит .match.params.nodeName, сред: props.environments} Похоже, что это ISN» т оберточной маршрутизатор правильно с моей реализации выше. Как бы я правильно обернуть мою страницу компоненту с Redux и маршрутизатором так, что он может получить этот маршрутизатор Params?
Phillip
1

голосов
1

ответ
632

Просмотры

Реагировать v4 Router на изменение

Я разрабатываю обычные Реагировать JS приложения и с помощью BrowserRouter. Мне нужно знать, когда изменение маршрута и единственное, что я нашел в том, чтобы использовать пакет истории те же ребята (реагируют-обучение). Их пример выглядит достаточно просто, но не работает вообще для меня: импорт createHistory из «История / createBrowserHistory» Const истории = createHistory () console.log ( «а») history.listen ((место, действие) => {консоли. войти ( `текущий URL составляет $ {location.pathname} $ {location.search} $ {location.hash}`) console.log ( `Последнее действие навигации было $ {действие} ')}) Const A = реквизита = > A B константная в = реквизите => в виде ReactDOM.render (, document.getElementById ( 'приложение')) консоль печатает "а" но слушать обратный вызов никогда не вызывается, когда я нажимаю вокруг и мои изменений URL. Существует не так много больше в своей документации, так кто-нибудь знает, чего не хватает?
Michel H.
1

голосов
0

ответ
143

Просмотры

Реагировать маршрутизатор - Разрешить базовое имя с расширением

Я задаюсь вопросом, как разрешить с базовым именем расширением .html, чтобы соответствовать по React маршрутизатора: //www.domain.com/foo/bar/index.html //www.domain.com/baz/quux.html Прямо сейчас, я получаю ошибку не может получить /foo/bar/index.html. Причина, я прошу это мы мигрируем старый, статический сайт HTML / PHP Реагировать, и все ссылки на старом сайте заканчивается index.html или something_else.html, и я хотел бы создать механизм для перенаправления посетителей соответствующая страница на новом Реагировать веб-приложения без этой ошибки. Как теперь, любой входящий трафик, используя URL-адрес с расширением базового каталога получит эту страницу ошибки. Без базового имени, он работает, как и следовало ожидать, конечно. Спасибо! ОБНОВЛЕНИЕ В производстве, это может быть столь же просто, как с помощью Apache переписывает: RewriteEngine На RewriteBase / RewriteRule ^ индекс \ .html $ - [L] RewriteCond% {REQUEST_FILENAME}! -f RewriteCond% {REQUEST_FILENAME}! -d RewriteRule. /index.html [L] Однако, это не работает при использовании сервера разработки WebPack.
mwieczorek
1

голосов
2

ответ
51

Просмотры

Получение ошибки «отправка не является функцией» при объединении двух файлов [ReactJS]

Я создаю приложение списка задач с использованием reactJS. Если я пишу две разные логики в двух отдельных файлах она работает просто отлично, но при объединении этих двух файлов он дает ошибку. RenderRemaining.js файл: импорт Реагировать из «реагировать»; импорта {} соединить с 'среагировать-Redux'; импорт магазин от «../store/store»; импорт RenderRemainingData из './RenderRemainingData'; Const RenderRemaining = (подпорки) => {возврата (задачи: {props.list.map ((подробно) => {возвращение})}); } Const mapStateToProps = (состояние) => {{список возврата: state.todoReducer}; } Экспорта по умолчанию подключения (mapStateToProps) (RenderRemaining); RenderRemainingData.js файл: импорт Реагировать из «реагировать»; импорта {} соединить с 'среагировать-Redux'; импорт removeTodo из '../actions/removeTodo'; Const RenderRemainingData = ({диспетчерская, TODO, идентификатор, описание, IsCompleted}) => {если (IsCompleted!) {возвращение ({TODO} {отправка (removeTodo ({TODO, описание, идентификатор}));}}> {описание }); } Вернуться ложным; } Экспорта по умолчанию подключения () (RenderRemainingData); Теперь выше код работает просто отлично. После объединения двух вышеупомянутых файлов в качестве своего файла в расслоении плотного RenderRemaining.js и удаления RenderRemainingData.js файла. RenderRemaining.js файл: (после объединения) импорта Реагировать от «реагировать»; импорта {} соединить с 'среагировать-Redux'; импорт магазин от «../store/store»; импорт removeTodo из '../actions/removeTodo'; Const RenderRemainingData = ({диспетчерская, TODO, идентификатор, описание, IsCompleted}) => {если (IsCompleted!) {возвращение ({TODO} {отправка (removeTodo ({TODO, описание, идентификатор}));}}> {описание }); } Вернуться ложным; } Const RenderRemaining = (подпорки) => {возврата (Задачи: {props.list.map ((подробно) => {возвращение})}); } Const mapStateToProps = (состояние) => {{список возврата: state.todoReducer}; } Подключить () (RenderRemainingData); экспорт по умолчанию подключается (mapStateToProps) (RenderRemaining); Теперь, когда происходит событие OnClick дает ошибка отправки не функция в консоли. Я не знаю, почему это происходит.
Devesh Patel
1

голосов
0

ответ
35

Просмотры

Понимание Реагировать истории браузера

Я строю веб-приложение с использованием реакции 16 и реагировать маршрутизаторами v4. Мое приложение имеет index.js как это - импорт Реагировать из «реагировать»; импорт ReactDOM из «реагируют-дом»; импорт App из "./components/App"; импорт Bootstrap из "начальной загрузки / дист / CSS / bootstrap.css"; импорт 'шрифт-устрашающий / CSS / шрифта awesome.min.css'; импорт "../assets/css/clean-blog.css"; импорт {BrowserRouter} от 'реагируют-маршрутизатор-DOM'; ReactDOM.render (, document.getElementById ( 'приложение')); Мой App.js выглядит следующим образом - «использовать строгие»; импорт из React "реагируют"; импорт заголовок из «./layout/header»; импорт тела из «./layout/body»; импортировать колонтитул из «./layout/footer»; Класс App расширяет React.Component {визуализации () {возвращение (); }}; экспорт по умолчанию App; В моем компоненте заголовка, у меня есть окно поиска, и я хочу, чтобы при нажатии кнопки пользователь нажимает на seacrh представить, то они должны быть перенаправлены в / seacrh URL. Мне удалось получить это. Пожалуйста, посмотрите на функцию handleSubmit «использовать строгий»; импорт из React "реагируют"; импорт {Ссылка} от «реагировать маршрутизаторы-дом»; Уведомления импорта, {} уведомляет от «среагировать-уведомит-тоста»; импорт {withRouter} от 'реагируют-маршрутизатор-DOM'; Класс заголовок расширяет React.Component {конструктор (реквизит) {супер (реквизит); this.state = {SEARCHTERM: ''}; this.handleSubmit = this.handleSubmit.bind (это); этот. handleChange = this.handleChange.bind (это); } HandleChange (событие) {this.setState ({SEARCHTERM: event.target.value}); } HandleSubmit (событие) {event.preventDefault (); //console.log(this.props); //console.log(this.state.searchTerm); this.props.history.replace ({имя пути: '/ поиск', SEARCHTERM: this.state.searchTerm}); } Визуализации () {возвращения (My Library Меню Главная Авторы Книги Поиск); }}; экспорт по умолчанию withRouter (заголовок); Это прекрасно работает, когда все адреса, кроме когда я пытаюсь представить из / URL поиска, то ничего не происходит. То, что я имею в виду, что функция handleSubmit вызывается, но тогда это не срабатывает вызов переадресации. Я очень новый для среагировать и хотел бы иметь некоторое представление о том, как лучше всего я должен справиться с этим.
nasaa
1

голосов
0

ответ
284

Просмотры

React маршрутизатора v4 вложенные маршруты

Кулак всего Реагировать маршрутизатор очень запутанный для меня по следующим причинам. Если другие чувствуют то же самое, что это может быть полезно для них, или если они не чувствуют себя в противном случае, их ответ был бы полезен для меня :) 1) Что такое стандартный способ использования маршрутизатора реагировать V4 с помощью коммутатора? это даже хорошо в V4? с помощью маршрута конфигурации в одном файле JS, как коллекции? используя маршрут, указанный в родительском компоненте? 2) Если мои приложения имеют несколько больших модули, Как я могу указать маршруты на основе модулей и объединить их в корневом файле индекс? это даже правильный подход к начинается с? У меня есть мой маршрут конфигурации написан таким образом, как я могу настроить NotFound (404) логики Если у меня есть свой маршрут конфиг таким образом, я хочу, чтобы перенаправить на главную страницу, если маршрут не найден. константные маршруты = [{путь: '/', компонент: Схема, маршруты: [{путь: '/ пользователей', компонент: Пользователи, точное: истинно}, {путь: '/ пользователей /: идентификатор', компонент: ViewUser}, {путь: '/ AddUser', компонент: AddUser}]}, {компонент: Layout}]; Const RouteWithSubRoutes = (маршрут) => (()} />); экспорт Const RenderChildren = (childRoutes) => {если (childRoutes) {вернуться childRoutes.map ((маршрут, я) => {возвращение;}); }}; экспорт Const RouteConfig = () => {{возврата (RenderChildren (маршруты)}); }; Const RouteWithSubRoutes = (маршрут) => (()} />); экспорт Const RenderChildren = (childRoutes) => {если (childRoutes) {вернуться childRoutes.map ((маршрут, я) => {возвращение;}); }}; экспорт Const RouteConfig = () => {{возврата (RenderChildren (маршруты)}); }; Const RouteWithSubRoutes = (маршрут) => (()} />); экспорт Const RenderChildren = (childRoutes) => {если (childRoutes) {вернуться childRoutes.map ((маршрут, я) => {возвращение;}); }}; экспорт Const RouteConfig = () => {{возврата (RenderChildren (маршруты)}); };
hashbytes
1

голосов
0

ответ
198

Просмотры

Реагировать (Родной) и компонент жизненного цикла и обработка событий

I have been learning React Native with Expo. Decided to work on a small two screens app to understand the 'React way' but I couldn't figure out how to think in React. I believe I don't understand component life cycles enough. In the example code below my console output is: home render header render home render (why home is rendering again?) header will receive props header render Since my header is a custom component for StackNavigator I can't pass an event handler to it via props (afaik?) so I have to make a setParams calls in HomeScreen's componentDidMount / WillMount events but when I do that my entire HomeScreen re-renders itself just why? What will happen when I have a FlatListView in my HomeScreen that could potentially display 100s of items. My home screen and all of it's children will re-render itself right at the start? Passing props to custom navigation header is also another thing I don't fully understand. I have no idea how to pass screen specific navigationOptions to my custom header. Say if I decided to pass a "title" parameter per screen if I define speciic navigationOptions properties on Routes my custom header does not get those parameters. Here is my code: Router.js export const RootStack = StackNavigator( { Home: { screen: HomeScreen } }, { navigationOptions: ({navigation}) => { return { header: } } }); App.js class App() { render() { return } } HomeScreen.js export default class HomeScreen extends React.Component { constructor(props) { super(props); this.refCheck = "Home Screen"; } componentDidMount() { this.props.navigation.setParams({ onMenuClick: this._handleMenuClick }); } _handleMenuClick = () => { console.log("Handle menu click. - " + this.refCheck); } render() { console.log("home render"); return ( Home Screen ) } } MainHeader.js export default class MainHeader extends React.Component { constructor(props) { super(props); } componentWillReceiveProps(nextProps) { console.log("header will receive props"); } render() { console.log("header render"); return ( Menu Logo Search ) } }
Alaminut
1

голосов
0

ответ
464

Просмотры

Несколько параметров без / в реагирующем маршрутизаторе РОМ

Можно ли отправить несколько параметров в одной строке (без разделения их с /) The Params должны быть как myawesomeurl.com/?start=true&year=2000 маршрутизатор код: Проблема у меня в том, что главный компонент только оказывается, если я достигаю http://myawesomeurl.com/& с & в конце или отправить параметры. Спасибо!
lele
1

голосов
1

ответ
138

Просмотры

Создание человеко-читаемый URL-адреса с React маршрутизатора Параметры и Firebase RTD

В основном я пытаюсь выяснить, наилучший способ структурировать мои URL-адреса на моем сайте с точки зрения SEO. Сейчас у меня есть новости URL, структурирована следующим образом: http://example.com/news/ http://example.com/news/-FirebaseKey Где я могу - из последнего примера; получать информацию о статье непосредственно из firebase ключа, который предусмотрен в URL в качестве параметра. Тем не менее, я знаю, что это не является оптимальным для SEO - и мне было интересно, как я мог бы изменить это с моим URL структуры что-то вроде этого: http://example.com/news/this-is-an-example Как точно бы я подойти к этому? Я не могу думать о каких-либо других идеальных решениях, когда дело доходит до использования первичных и внешних ключей, потому что я не могу однозначно идентифицировать «названия» из моей firebase базы данных.
askaale
1

голосов
2

ответ
118

Просмотры

как обновить текущее состояние маршрута, если компонент сделал обновление

то, что я ранее сделал то, что я использовал router.replace componentDidUpdate (prevProps) {константные {searchParams, категория, ключевые слова} = this.props; Const {маршрутизатор} = this.context; router.replace ({путь к файлу: router.location.pathname, состояние: {searchParams, категория, ключевые слова}}); } Я попытался сделать это так, но он портит мою историю маршрутизатора, поскольку это добавляет еще одну историю с тем же маршрутом. Есть ли другой способ, что я могу возможно обновить свой текущий маршрут с обновленным состоянием я хочу без добавления больше к списку историй? Я хотел бы перейти к другим страницам и когда я нажимаю назад к этому конкретному маршруту, он сохраняет все детали поиска, которые я сделал, прежде чем я перемещаться на другие маршруты
Cris Ryan Tan
1

голосов
1

ответ
111

Просмотры

Как использовать фермент, чтобы проверить работу приложения?

Я хочу написать интеграционный тест, который проверяет, если вы находитесь на странице входа в систему, и вы войти в систему с правильными учетными данными, вы будете перенаправлены на страницу приборной панели пользователя. Мы будем издеваться нашим бэкенд в этом тесте, но я хотел бы использовать как можно больше реальный передний конец кода, как это возможно. Я это прибегая к помощи на некоторое время и не смогли найти никаких примеров того, как это сделать. Большинство примеров либо тест, чтобы убедиться, что маршруты там или но никогда на самом деле пройти через фактический поток. например, https://medium.com/@antonybudianto/react-router-testing-with-jest-and-enzyme-17294fefd303 Мы используем последнюю версию среагировать-маршрутизатор-дом и шутя для теста.
Daniel Kaplan
1

голосов
0

ответ
2.2k

Просмотры

Реагировать возвращение ошибки # 185 для пользователей IE11

Когда пользователь загружает приложение моей реакции (irlmap.com) в IE, а затем нажимает кнопку «Пуск» Я вижу ошибку ниже. Я получил и исправил эту ошибку много раз в других ситуациях, но эта конкретная ошибка содержится пользователи IE, что является аномалией я никогда ранее сталкивался. > Уменьшенная Реагировать ошибка # 185; посетить> http://facebook.github.io/react/docs/error-decoder.html?invariant=185 Что в длинной форме: Максимальная глубина обновления превышена. Это может произойти, когда компонент неоднократно вызывает SetState внутри componentWillUpdate или componentDidUpdate. Реагировать ограничивает количество вложенных обновлений для предотвращения зацикливания. Дело в коде с помощью кнопки «Пуск» используется маршрутизатор реагировать, а сама кнопка является реагировать маршрутизатор Link. ... Const Toolbar = () => (Пуск →)
astrojams1
1

голосов
0

ответ
174

Просмотры

сервер Настройка Nginx для работы с приложением React в подпапке сайта Wordpress?

У меня есть сайт WordPress хостинг на сервере Nginx. Я пытаюсь развернуть мое приложение реагирует на запуск в подпапке на WordPress сайта. Я видел подобные вопросы / ответы, и я попытался следующие настройки в моем Nginx конфигурации. местоположение / reactApp {корень /var/www/example.com; Индекс index.html; try_files $ $ URI URI / /reactApp/index.html; } Это простое приложение, блог и страница работы приложения, но проблема в том, - я также должен передать параметр URL в приложение для отображения надлежащего сообщения в блоге. http://www.example.com/reactApp/
texan2018
1

голосов
0

ответ
63

Просмотры

React.js маршрутизатор проблемы с маршрутизацией URL-параметров

ребята! Я стараюсь передать Params по URL (например, HTTP: // локальный: 8080 / редактировать / 99). Но получил ошибку GET HTTP: // локальный: 8080 / редактировать / bundle.js нетто :: ERR_ABORTED 99: 1 Отказался выполнить скрипт из 'HTTP: // локальный: 8080 / редактировать / bundle.js', потому что его MIME тип ( «текст / html») не является исполняемым, и проверка строг MIME типа включена. Все оказывается на стороне клиента. Но это показывает даже неправильный файл адрес. Действительно /pyblic/bundle.js Evidentlly это parces Парам после / в неправильном направлении. Если я посылаю параметр корня (например, HTTP: // локальный: 8080/99) все в порядке. Может быть, мне не хватает некоторых в среагировать-маршрутизатор. импорт React из 'реагируют'; импорт {BrowserRouter, маршрут, коммутатор} от 'реагирует-маршрутизатор-DOM' импорт ExpenceDashboardPage из '../components/ExpenceDashboardPage'; импорт AddExpencePage из '../components/AddExpencePage'; импорт EditExpencePage из '../components/EditExpencePage'; импорт HelpPage из '../components/HelpPage'; импорт NotFoundPage из '../components/NotFoundPage'; импорт заголовок из «../components/Header»; Const AppRouter = () => (); экспорта по умолчанию AppRouter; Package.json { "имя": "Expensify", "версия": "1.0.0", "главный": "index.js", "автор": "Эндрю Мид", "лицензия": "MIT", " скрипты ": { "служить": "жить-сервер общих /", "построить": "Webpack", "Dev-сервер": "WebPack-DEV-сервер"}," "8.0.0", "WebPack": "3.1.0", "WebPack-DEV-сервер": "2.5.1"}, "devDependencies": { "WebPack-DEV-промежуточного слоя": "3.1.2"} } WebPack-confog.js Const = путь требует ( 'путь'); module.exports = {запись:»./src/app.js', выход: {путь: path.join (__ имя_директории, 'общественность'), имя файла: 'bundle.js'}, модуль: {правила: [{Загрузчик : 'столпотворение-погрузчик', тест: /\.js$/, исключить: / node_modules /}, {тест: /\.s?css$/, используйте: [ 'стиль-погрузчик', 'CSS-погрузчик', 'дерзость-погрузчик']}]}, devtool: 'дешевый-модуль-Eval-источник-карта', devServer: {contentBase: path.join (__ имя_директории, 'общественность'), historyApiFallback:
Andrew Fleyer
1

голосов
1

ответ
15

Просмотры

Обновление страницы перенаправляет к неправильному URL в React

У меня есть следующие маршруты в моих App.js: Мой bundle.js ссылается на мой взгляд, по умолчанию / Index.cshtml: После входа в систему успешно я выполняю: this.props.history.push ( «/ администрировать»); ... в моем LoginPage компонент, который успешно перенаправляет / администрировать Вопрос: Как предотвратить от перенаправлены на страницу входа в систему при нажатии клавиши F5 на странице администрировать? Спасибо.
Ole EH Dufour
1

голосов
0

ответ
137

Просмотры

Реагировать-маршрутизатор. Как собирать историю по Перенаправление в среагировать-маршрутизатор-дом?

Я пытаюсь понять, что это правильный путь, чтобы собрать историю серфинга по веб-сайте SPA в React с среагировать-маршрутизатор-дом. Мне нужно сделать много перенаправлений внутри моего приложения, и это работа хорошо с компонентом среагировать-маршрутизатор-дом. Но это не собирает данные истории propely, потому что у меня есть возможность нажать кнопку назад на моих стрелках в браузере, но они переадресовать меня на некоторых других страницах сайта, InstEd прежнего ... Почему? Кроме того, я видел с этого поста Перенаправление в реакции-маршрутизатор-йот? что правильный путь заключается в использовании this.props.history.push ( «/ path1») - но я не могу понять, как реализовать это в моем приложении. Помогите кто-то меня, пожалуйста ... Так у меня есть следующий App.js: импорт среагировать, {Component} от «среагировать»; импорт {BrowserRouter, как маршрутизатор, коммутатор, маршрут} от 'реагируют-маршрутизатор-DOM'; импорт Auth из». / Авт / Авт '; импорт RegistrationPage из './Auth/RegistrationPage'; импорт LogoutPage от импорта EmployersBox './Auth/LogoutPage' от './Employers/EmployersBox'; импорт NotFoundPage из класса '' ./NotFoundPage App расширяет компонент {визуализации () {возвращение ()}} экспорта по умолчанию приложение; и или пример Logout.js компонента: //....Container: визуализации () {если (this.state.navigateEmployers) {возвращение} иначе, если (this.state.
Max Wolfen
1

голосов
0

ответ
349

Просмотры

Реагировать маршрутизатор v4 и загружаемые-компоненты всегда делают то же компонент, даже если маршрут соответствует другим

У меня есть стандартный React-Redux приложение с маршрутизатором реагировать v4, WebPack 4 и я пытаюсь выполнить отложенную загрузку компонентов с помощью библиотеки загружаемых-компонентов, поэтому WebPack может создать куски и загружать их по требованию. Проблемы, кажется, что это не всегда делает панель мониторинга (см код ниже) компонент внутри, независимо от маршрута. Я не понимаю причину. Я нашел подобную проблему: Реагировать-маршрутизатор v4 отрисовка неправильный компонент, но правильно соответствия, но по другой модели, и я не могу или не понимают, как применять это решение в моей проблеме. Я отправляю Основной AppContainer и файл маршрутов: AppContainer.js: импорт React, {Компонент} из Реагируйте импорта PropTypes от импорта «проп-типов» {Provider} от «реагировать-Redux» импортной ReduxToastr от «реагирующего перевождь-toastr» validateSession (this.props.persistor)} визуализации () {сопз {компонента: компонент, сессия, ... остальное} = this.props возвращение (this.props.session.userSignedIn:} />)}} PrivateRoute.propTypes = {компонент: PropTypes.func.isRequired, persistor: PropTypes.object.isRequired, сессия: PropTypes.object.isRequired, validateSession: PropTypes.func.isRequired} экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (PrivateRoute) Если я удалить, если (_DEV_) блок в маршрутах / index.js и всегда делает это как «другими» блокировать все работает нормально, но я теряю ГМР, то есть я должен обновить браузер, чтобы увидеть изменения коды вступили в силу. Edit Для того блуждающего, где истории проп приходит от: Главной точки входа приложения (в webpack.config.js). SRC / main.js: импорт Реагировать из «реагировать»
tommyalvarez
1

голосов
0

ответ
98

Просмотры

Реагировать-маршрутизатор browserHIstory.push () не перенаправляет

Я видел много подобных вопросов на StackOverflow, но предлагаемые решения не работает для меня. Кроме того, возможно, что я не знаю, как лучше применять его, так как я новичок в React. MCVE моего кода, как показано ниже: Класс экспорта по умолчанию ClDashboard расширяет компонент {конструктор (реквизит) {супер (реквизит) this.state = {старт: this.props.location.query.start, конец: this.props.location. query.end, период: this.props.location.query.period, АВТОПОВ: ложь}} componentWillMount () {this.setState (this.newProps (this.props))} componentDidMount () {если (this.state.autoRotate ) {пусть NextID = this.getNextID (this.props.route.clientInfo.farms) пусть [StartDate, EndDate] = this.getAutoRotateDates () пусть timeQuery = '/? начать =' + StartDate + & конец = ' + EndDate пусть farmChange = this.farmChange.bind (это) пусть farmChangeHandle = () => {если (this.state.autoRotate) {farmChange (NextID, timeQuery)}} SetTimeout (farmChangeHandle, 3000)}} farmChange = (ID , timeQuery) => {browserHistory.push (this.state.url + ID + timeQuery)} по существу то, что происходит, я пытаюсь повернуть между набором идентификаторов (getNextID () получает следующий идентификатор в последовательности), если определенный флаг АВТОПОВ устанавливается истина. Тем не менее, хотя URL меняется на следующий ID, страница не отражает изменения. Я попытался следующие вещи: - Я не думаю, что решение здесь применимо к моему делу, но если это так, хотел бы знать, каким образом. - Моя версия реагировать-маршрутизатор 3,0. 5 так решения, как это для v4 не будет работать - Пробовал добавлять componentWillReceiveProps (), как предложено здесь, но это не помогло. Одна странная вещь, что если я копирую все внутри, если (this.state.autoRotateFarms) к componentWillReceiveProps (), то она работает, но это, кажется, перенаправить страницу назад к следующему ID в последовательности, даже после того, как вы уйдете. Как я могу идти о фиксации этого?
Antimony
1

голосов
0

ответ
162

Просмотры

Config React BrowserRouter in Google Cloud Engine

Я использую на основе PHP статического сервера Google Cloud платформы. Моя общая папка содержит одну целевую страницу и и веб-приложений. Целевая страница просто статический HTML-файл с несколькими CSS и графическими файлами, располагающихся на корне. Веб-приложение состоит из React, это index.html находится внутри приложения папки с именем я настроил мой среагировать приложение использовать BrowserRouter. Веб-приложение возвращает ошибку 404, когда я обновить любую страницу внутри приложения. Как настроить app.yaml, чтобы решить эту проблему. Моя текущая конфигурация ниже: во время выполнения: php55 api_version: 1 поточно: истинные skip_files: - (. * /)? SRC / - - node_modules / ^ приложение \ .yaml - ^ (. * /) Gitlab \ .yml - ^ ( . * /) приложение \ .yaml - ^ пакет \ .json - ^ пакет блокировки \ .json - ^ README \ .md - ^ webpack.config \ .js -. ^ (* /) # * #?. - (. * /)?. ^ * ~ - (. * /)?.. ^ * \ ру [со] - (. * /) ^ * / RCS /?..
Sivadass N
1

голосов
1

ответ
111

Просмотры

Реагировать надуманные данные не работают в визуализации

Я извлечение данных из API на основе идентификатора, который был принят в качестве опоры от родительского элемента. У меня есть все, что работает хорошо, за исключением того, что, когда я пытаюсь сделать данные, он не показывает ничего, кроме. Выборки является успешным, потому что console.log внутри ComponentWillReceiveProps показывает именно то, что мне нужно. Код: импорт React, {Компонент} из "реагировать"; Const teamAPI = 'HTTP: // локальный: 8080 / API / команды /' Const playerAPI = 'HTTP: // локальный: 8080 / API / playersByTeam /' Const matchAPI = «HTTP: // локальный: 8080 / API / матч / 'класс View расширяет компонент {конструктор () {супер (); this.state = {данные: [], playersData: [], обновление: [], team1: [], team2: [], matchData: [], TestTeam: [],}; } componentWillReceiveProps (newProps) {если (newProps.matchId! == this.props.matchId) {выборки (matchAPI + newProps.matchId) .then ((matchResponse) => matchResponse.json ()) .then ((matchfindresponse) => {console.log (matchfindresponse.team1.name) ; console.log (this.props.matchId + '' + newProps.matchId); this.setState ({TestTeam: matchfindresponse.team1.name,})})}} componentDidMount () {Const обещает = [выборки (teamAPI) .then (соответственно => resp.json ()), выборки (playerAPI + 82) .then (соответственно => resp.json ())]; Promise.all (обещает) .then (([teamData, playerData]) => {console.log (teamData); console.log (playerData); this.setState ({team1: teamData [0] .name, team2: teamData [1] .name, playersData: playerData,})}); } Reply_click = идентификатор => {возврата () => {этот. TestTeam} из componentWillReceiveProps не происходит, даже если в console.log она существует. Я пропускаю что-то простое здесь или то, что может быть проблема? Спасибо за любую помощь. TestTeam} из componentWillReceiveProps не происходит, даже если в console.log она существует. Я пропускаю что-то простое здесь или то, что может быть проблема? Спасибо за любую помощь.
Ferder
1

голосов
2

ответ
281

Просмотры

React Router v4 previous state component

Я ищу решение - реагировать маршрутизатор v4 не имеет предыдущее состояние компонента. Например, вот простой счетчик: импорт React, {Компонент} из «реагируют»; Класс Расписание расширяет компонентный {конструктор (реквизит) {супер (реквизит); this.state = {счетчик: 0}; this.holdState = this.holdState.bind (это); } HoldState () {this.props.location.state = this.state.counter; Const состояние = this.state; this.setState ({счетчик: state.counter + 1}); } Визуализации () {возвращение (6/5 @ Вечнозеленые растения 6/8 против Kickers 6/14 @ United this.holdState ()}> Нажмите {this.state.counter}); }} Экспорт Расписание по умолчанию; Я пытался подтолкнуть государство к расположению и истории, реквизита. Но всякий раз, когда я нажимаю «кнопку браузера назад» со следующей страницы, она всегда сбрасывает состояние. Может кто-нибудь сказать мне, где я делаю ошибку?
wawrzon
1

голосов
0

ответ
87

Просмотры

Доступ к окружающей среде Реагировать разработчик, через Apache обратного прокси-сервер

Я просто пытаюсь начать с основным созданием реагирующего-приложением. Я могу получить доступ к среде разработки штрафа через типичный локальный хост: 3000, но я хотел бы получить доступ к этому через мой общедоступный сервер Apache. Я установить это с помощью обратного прокси-сервера, на подкаталог: ServerName example.com ProxyPass / реагировать-приложение http://127.0.0.1:3000/ ProxyPassReverse / реагировать-приложение http://127.0.0.1:3000/ Это работает, за исключением того, что ссылки в index.html кодируются искать только из корневого каталога. Например, ИС расслоение в: Когда его фактическое местонахождение действительно под /react-app/static/js/bundle.js. В качестве альтернативы это также может быть сделано в относительный URI. Моя пара вопросов: Как я могу запустить среду разработки реагировать приложение под некорнем каталога? С другой стороны,
Nathan
1

голосов
0

ответ
193

Просмотры

Access data from child component without rendering parent component React-js

I am passing data from parent component to child component through . This works fine and I can see the output of data in console.log() from child component. However, this works perfectly only when I am opening the parent component first and then navigate to the child component. I have put data to console from the render method and I see in the initial run at parent component, data is pushed twice to the console the initial one being null and the second one with actual data. When I call the data directly from child component, I only see one output in the console which is null. I want to access data directly from child component without navigating through parent component. I have tried changing the component lifecycles but nothing worked. Below is code for my parent component. class Main extends React.Component{ constructor(props){ super(props) this.state = { data: [] } } componentWillMount(){ this.importJSON() } importJSON(){ return fetch ("https://bitbucket.org/...") .then(response => response.json()) .then(responseJson => { this.setState({ data: responseJson.fulldata }) }) } render(){ console.log(this.state.data) //This renders twice in parent is rendered. return( }/> ) } } export default Main How can I have data called in child component directly from parent component without navigating from parent component? EDIT: Function from child component(Chord) where the prop is called importData(){ const newData = this.props.value; } const newData is then passed on to the visualization. If I load Chord component directly in console I see a null array. If chord is navigated from Parent component (Main) then it works fine.
Rohit K
1

голосов
0

ответ
62

Просмотры

выезжать и въезжать не работают в ReactCSSTransitionGroup

В моем проекте появляются хорошо работает. Тем не менее, я не могу понять, почему входить и выходить не работают. То же самое происходит с маршрутизаторами. При загрузке страницы, анимация работает. Но при переходе на другую страницу, все происходит внезапно. В чем может быть проблема? импорта React, {Компонент} из "реагируют"; импорт ReactCSSTransitionGroup из 'реагирующих-аддоны-CSS-переход-группы'; импорт InputMask из «реагируют-ввода-маску»; импорт Закрыть из «../images/cancel.svg»; импорт»./fonts.css'; импорт»./Modal.css'; модальный класс расширяет компонент {состояние = {адрес электронной почты: '', имя: '', телефон: '', сообщение: ''}; handleSubmit = (е) => {e.preventDefault (); console.log ( 'форма передается значение Электронная почта.', this.state); e.target.reset (); }; handleInputChange = (е) => {this.setState ({[e.target.name]: e.target.value})}; OnClose = (е) => {this.props.onClose && this.props.onClose (е); }; рендеринга () {если (this.props.show!) {возвращение нуль; } Возвращение ({this.props.children} {this.onClose (е)}}> {this.onClose (е)}} типа "кнопка" => Some Text Отправить); }} Экспорта по умолчанию модального; Мой стиль CSS .OverlayTransition появиться {непрозрачности: 0,01; } .OverlayTransition-appear.OverlayTransition-появляется-активная {непрозрачности: 1; Переход: все 0.4 сек легкость; Переход задержки: 0.9s; } .WrapTransition появиться {непрозрачность: 0,7; преобразования: translateY (100%); } .WrapTransition-appear.WrapTransition-появляется-активная {непрозрачности: 1; преобразование: translateY (0); Переход: все 0.7s легкость; } .ModalTransition появиться {непрозрачность: 0,8; преобразования: translateX (100%); } .ModalTransition-appear.ModalTransition-появляется-активная {непрозрачности: 1; преобразование: translateX (0); Переход: все 0.7s легкость; Переход задержки: 0.6s; }
max
1

голосов
1

ответ
80

Просмотры

Как построить URL на основе запроса в реакции

У меня есть приложение, которое принимает строку для поиска и возвращает результаты в одном маршруте: hosts.abc.com:3000. URL не меняется. Я хочу найти свое отражение в URL, так что я могу поделиться ссылкой и пользователи не должен делать весь выбор поля формы. например: hosts.abc.com:3000/?type=all&query=coins Можно ли это сделать с помощью среагировать-маршрутизатор?
kbang
1

голосов
2

ответ
39

Просмотры

Изменение реакции-маршрутизатор v3 реагировать-маршрутизатор v4

У меня есть проблема с переходом от маршрутизатора реагирует-с3 реагировать-маршрутизатор v4. Я не знаю, как настроить его правильно. Я импортировать этот: импорт {Route, IndexRoute} от 'реагировать-маршрутизатор; импорт {BrowserRouter} из "реагируют-маршрутизатор-дом"; Затем я устанавливаю маршрутизатор в визуализации: Но только шаблон компонента появляется.
Samuel
1

голосов
2

ответ
423

Просмотры

Как я могу получить реагировать-маршрутизатор v4 определенного Params с курьерским на стороне сервера

Я стараюсь, чтобы получить: USERID «Альбертом» из этого URL HTTP: // локальный: 5000 / поиск / альберт запрос = ал & страница = 1 на стороне сервера, но не то, что я могу сделать, чтобы правильно на получить реагирующие-маршрутизатор определяется Params? node.js с курьерским? routes.js [{путь: '/ поиск /: идентификатор пользователя', компонент: Поиск}, {путь: '/ поиск', компонент: Поиск,} ...] server.js server.get ( '*', асинхронная (REQ, разреш, следующий) => {Const = pageData ждут маршруты .filter (маршрут => matchPath (req.path, маршрут)) .map ((маршрут) => {console.log (маршрут) возвращение route.component} )}
Albert Fang
1

голосов
1

ответ
542

Просмотры

необходимо пройти EmaiID и пароль от входа компонента домашнего компонента реакции

Реагировать версии 15.2.1 Может кто-то пожалуйста, скажите мне, как пройти вокруг данных между компонентами. Мне нужно передать электронную почту и пароль от Login.js к Products.js где я сделать запрос HTTP на сервер на дисплее функции (). импорт Login.js React из "реагируют"; импорта {Кнопки, FormGroup, FormControl, ControlLabel} из "реагирует-самозагрузку"; экспорт класс Войти расширяет React.Component {конструктор (реквизит) {супер (реквизит); this.state = {адрес электронной почты: "", пароль: ""}; } ValidateForm () {вернуть this.state.email.length> 0 && this.state.password.length> 0; } HandleChange = событие => {this.setState ({[event.target.id]: event.target.value}); } HandleSubmit = асинхронное событие => {event.preventDefault (); попробуй это. props.history.push ( "/ продукты"); } Поймать (е) {Alert (e.message); }} Визуализации () {возвращение (E-mail Пароль Войти); }} Импорта Products.js React из 'реагируют'; экспорт продуктов класса расширяет React.Component {дисплей () {вар HTTP = новый XMLHttpRequest (); вар URL = «» // жестко запрограммировали имя пользователя и пароль здесь сейчас. необходимо получить его из Войти компонент http.send () возвращает http.responseText} визуализацию () {уаг х = this.display (); вар JSONObject = JSON.parse (х) // console.log (JSONObject) вар conArray = [] для (вар у = 0, Y <jsonObject.length; у ++) {консоли. войти (JSONObject [Y] [ 'completeName']) conArray.push (JSONObject [Y] [ 'completeName'])} возврата (Названия продуктов {conArray.map (т => {T})}); }} Index.js импорта React из 'реагируют'; импорт {} визуализации от «среагировать-дом»; импорта {BrowserRouter в качестве маршрутизатора} из «реагируют-маршрутизатор-дом»; Импорт маршрут от «среагировать-маршрутизатор-йот / маршрута»; импорт {browserHistroy, коммутатор} от 'реагируют-маршрутизатор'; импорт createBrowserHistory из 'истории / createBrowserHistory'; Const newHistory = createBrowserHistory (); импорт {} Продукция из "./components/Products"; импорт {} Войти с "./components/Login"; импорт "столпотворение-polyfill"; Класс App расширяет React. Компонент {визуализации () {возвращение (); }} Визуализации (, window.document.getElementById ( 'приложение'));
megha aswath
1

голосов
1

ответ
1.1k

Просмотры

Pass Props to this.props.children

I am new to React and I'm having an issue with passing custom props to this.props.children. I have tried React.cloneElement and I can see the prop when I do a console.log in the class I created it but it gets lost when I try to past it. I don't know if maybe React-Router-Dom is doing something to cause the prop to not get passed. any help would be greatly appreciated. I started this project using Create-React-App from GitHub. I have the following software installed. "react": "^16.3.2", "react-dom": "^16.3.2", "react-redux": "^5.0.6", "react-router-dom": "^4.2.2", "react-scripts": "1.1.4", "redux": "^3.7.2", in App.js render() { return ( ); } in RootPage.js (Parent) render() { const { classes, theme, children } = this.props; var childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { doSomething: "Test String" })); console.log(childrenWithProps) return ( {childrenWithProps} ); } With the console.log above in RootPage.js I can see the prop "doSomething". in TestPage.js (Child) render(){ const { classes, theme } = this.props; console.log(this.props) return ( ); } in the above console.log in TestPage.js I dont see "doSomething" prop I passed. Thank you for any help.
user1184205
1

голосов
1

ответ
50

Просмотры

Возможно ли, что я могу использовать Реагировать Маршруты без работающего сервера

В настоящее время я использую BrowserHistory для моей маршрутизации в React, которые мне нужно запустить nodejs сервера для этого, и я не хочу. Есть ли какая-то альтернатива с использованием BrowserHistory, я слышал о HashHistory, может кто-нибудь дать мне пример hashHIstory и какова разница между ними. Для меня я не волнует, если URL выглядит некрасиво, я просто не хочу запустить сервер только для маршрутизации. Мой текущий код выглядит следующим образом: импорт Реагировать из «реагировать»; импорт {BrowserRouter, маршрут, переключатель, Перенаправление} от 'реагируют-маршрутизатор-DOM'; импорт Главное из «./components/main/main.component»; импорт SecondView из './components/secondview/secondview.component'; импорт ThirdView из './components/thirdview/thirdview.component'; импорт Стажировка из «./components/traineeship/traineeships.component»; импортировать InformationFilter из "./components/information/information-filter.component"; Const AppRoutes = () => (); AppRoutes экспорта по умолчанию;
Mizlul
1

голосов
1

ответ
40

Просмотры

Реагировать маршрутизатор не делает компонент изначально

Это странно для меня. Я начинаю мое приложение на местном уровне. У меня есть только заголовок и TaskPage в моем приложении, как так. импорта React, {Компонент} от 'реагируют'; импорт {withRouter} от 'реагируют-маршрутизатор-DOM'; импорта {} соединить с 'среагировать-Redux'; импорт заголовок из «../components/header»; импорт TasksPage из»../pages/tasks'; импорта {} маршрута от «реагируют-маршрутизатор»; Класс App расширяет компонент {визуализации () {возвращение (); }} Экспорта по умолчанию withRouter (подключение () (App)); И тогда мой маршрутизатор материал. импорт»./views/styles/styles.css'; импорт React из 'реагируют'; импорт ReactDOM из «реагируют-дом»; импорта {} Провайдер от 'среагировать-Redux'; импорт {ConnectedRouter} от ' реагируют-маршрутизатор-Redux '; импортировать историю из «./history»; импорт configureStore из './store'; импорт registerServiceWorker из './utils/register-service-worker'; импорт App из './views/app'; импорт TaskPage из магазина сопзЬ»./views/pages/tasks' = configureStore (); Const RootElement = document.getElementById ( 'корень'); Функция визуализации (Компонент) {console.log ( 'КОМПОНЕНТ ::', компонентный); ReactDOM.render (, RootElement); } Если (module.hot) {module.hot.accept ( './ просмотров / приложение', () => {визуализации (требуется ( './ мнения / приложение') по умолчанию);.})} RegisterServiceWorker (); Сначала я получаю пустую страницу. Но если бы я внести изменения в странице App и сохранить его в то время как приложение работает, как только пространство или возвращение линии, то незначительного, я получаю мою страницу задач внезапно. Он отлично работает тогда. У меня нет никаких ошибок в моей консоли в любой момент во время этого процесса, так что я думаю, что я что-то не так с моей маршрутизацией где-то, когда приложение изначально загружается. Или, может быть, что-то делать с этим TaskPage. импорта React, {Компонент} от 'реагируют'; импорт {Список} из «неизменных»; импорт PropTypes из «проп-типов»; импорта {} соединить с 'среагировать-Redux'; импорт {withRouter} от 'реагируют-маршрутизатор-DOM'; импорт {createSelector} от 'Reselect'; импорт {getTaskFilter, getVisibleTasks, tasksActions} из 'Src / задачи'; импорт TaskFilters из»../../components/task-filters'; импорт TaskForm из '../../components/task-form'; импорт TaskList из '../../components/task-list'; экспорт класс TasksPage расширяет компонент {статический propTypes = {CreateTask: PropTypes.func.isRequired, filterTasks: PropTypes.func.isRequired, FilterType: PropTypes.string.isRequired, loadTasks: PropTypes.func.isRequired, местоположение: PropTypes.object.isRequired, removeTask: PropTypes.func.isRequired, задачи: PropTypes.instanceOf (Список) .isRequired, updateTask: PropTypes.func.isRequired}; componentWillMount () {this.props.loadTasks (); this.props.filterTasks (this.getFilterParam (this.props.location.search)); } ComponentWillReceiveProps (nextProps) {если (== nextProps.location.search this.props.location.search!) {This.props.filterTasks (this.getFilterParam (nextProps.location.search)); }} componentWillUnmount () {// this.props.unloadTasks (); } GetFilterParam (поиск) {константный PARAMS = новые URLSearchParams (поиск); вернуть params.get ( 'фильтр'); } Визуализации () {возвращение (); }} // ===================================== // CONNECT // ---- --------------------------------- Const mapStateToProps = createSelector (getTaskFilter, getVisibleTasks, (FilterType, задачи) => ( {FilterType, задачи})); Const mapDispatchToProps = Object.assign ({}, tasksActions); экспорта по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (TasksPage)); }} // ===================================== // CONNECT // ---- --------------------------------- Const mapStateToProps = createSelector (getTaskFilter, getVisibleTasks, (FilterType, задачи) => ( {FilterType, задачи})); Const mapDispatchToProps = Object.assign ({}, tasksActions); экспорта по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (TasksPage)); }} // ===================================== // CONNECT // ---- --------------------------------- Const mapStateToProps = createSelector (getTaskFilter, getVisibleTasks, (FilterType, задачи) => ( {FilterType, задачи})); Const mapDispatchToProps = Object.assign ({}, tasksActions); экспорта по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (TasksPage));
Puerto
1

голосов
0

ответ
25

Просмотры

Магазин не сохраняется после изменения маршрута

Я пишу приложение, используя реагировать, реагировать маршрутизаторы v4, Redux и Redux-сагу. У меня есть форма входа, который поставив маркер после правильного журнала в процессе. Когда я перехожу к другому компоненту, используя навигацию с помощью ссылки, мой магазин восстановления и пусто. Я пробовал различные решения, но не любой помогает мне. Класс LoginForm LoginForm расширяет React.Component {конструктор (реквизит) {супер (); this.state = {имя пользователя: '', пароль: ''}; this.onInputUsernameChange = this.onInputUsernameChange.bind (это); this.onInputPasswordChange = this.onInputPasswordChange.bind (это); this.onSubmit = this.onSubmit.bind (это); } OnSubmit () {сопз ROOT_URL = "HTTP: // локальный: 8000"; пусть сам = это axios.post (ROOT_URL + '/ Войти', {электронная почта: self.state.username, пароль: self.state.password}) .then (ответ => {Если (response.status === 200) {this.props.onRequestToken (response.data) self.props.history.push ( "/ книги"); }}) .Catch (функция (ошибка) {Alert ( "! Неверный Логин или пароль Попробуйте еще раз!")}); } .... константное mapDispatchToProps = отправка => {{возвращение onRequestToken: (лексема) => отправка ({типа: "TOKEN_PUSH", маркер})}; }; экспорта по умолчанию withRouter (подключение (нуль, mapDispatchToProps) (LoginForm)); Переходники Const rootReducer = combineReducers ({usersReducer, rentsReducer, booksReducer, customerReducer, authorsReducer, rolesReducer, tokenReducer, маршрутизатор: routerReducer}) экспорта по умолчанию класс rootReducer App.js приложение расширяет компонент {визуализации () {возвращение (} />} />} /> ....); }} Саги экспорта по умолчанию функция * rootSaga () {выход вилки (rentSagas); Выход вилки (bookSagas); Выход вилка (customerSagas); Выход вилка (authorsSagas); Выход вилки (rolesSagas); Выход вилки (usersSagas); } Index.js Const История = createHistory () Const = routerMiddleware промежуточного слоя (история) Const sagaMiddleware = createSagaMiddleware () Const магазин = createStore (rootReducer, applyMiddleware (sagaMiddleware, промежуточного программного обеспечения)) sagaMiddleware.run (rootSaga) ReactDOM.render (, документ. getElementById ( 'корень')); registerServiceWorker (); История Const JS = createHistory () Const = routerMiddleware промежуточного слоя (история) Const sagaMiddleware = createSagaMiddleware () Const магазин = createStore (rootReducer, applyMiddleware (sagaMiddleware, промежуточного программного обеспечения)) sagaMiddleware.run (rootSaga) ReactDOM.render (, document.getElementById (» корень ')); registerServiceWorker (); История Const JS = createHistory () Const = routerMiddleware промежуточного слоя (история) Const sagaMiddleware = createSagaMiddleware () Const магазин = createStore (rootReducer, applyMiddleware (sagaMiddleware, промежуточного программного обеспечения)) sagaMiddleware.run (rootSaga) ReactDOM.render (, document.getElementById (» корень ')); registerServiceWorker ();
Dawid W
1

голосов
0

ответ
100

Просмотры

Доступ Реагировать маршрутизатор стек истории

У меня есть приложение, где вы приезжаете в фотоальбоме список с помощью различных средств (поиск, детализация по категориям, и т.д.). Из альбома, вы щелкаете открыть отдельные фотографии и перебирать их с помощью стрелки влево / вправо, а также различных инструментов редактирования. Каждые из действий итерации / инструмента делает history.push (), чтобы добавить маршрут к истории маршрутизатора. Я пытаюсь реализовать кнопку, которая будет вернуться к точному месту в истории, прежде чем вы начали просмотр отдельных фотографий. Чтобы сделать это, я хотел бы идти история стека в обратном направлении до точки, где история соответствует 1 из нескольких моделей затем сделать history.go (-14) (или любой другой), чтобы перейти обратно на маршрут, который начался весь цепь. Я искал в React код маршрутизатора, а также как объект истории HTML5, и я не» т видит способ обращения к стеку истории непосредственно, так что я могу ходить обратно. Я предпочел бы не зависеть от решений каждого отдельного действия фото подтолкнуть их путь к отдельному месту, так что делает его хрупким (каждая фотографию действие строится другим разработчиком и добавление новых действий в будущем потребует предыдущих знаний, чтобы помнить, чтобы сделать это ). Я не могу пойти на жесткий кодированный путь, потому что бы быть прижаты к верхней части стека истории и ответный удар стрелка будет просто вернуться к последней отдельной фотостраничку вместо страницы поиска, создавшего список альбомов, в первую очередь , Любые предложения о доступе к стеку истории? d, а не зависеть от решений каждого отдельного действия фото подтолкнуть их путь к отдельному месту, так что делает его хрупким (каждая фотографию действие строится другим разработчиком и добавление новых действий в будущем потребует предыдущих знаний, чтобы помнить, чтобы сделать это). Я не могу пойти на жесткий кодированный путь, потому что бы быть прижаты к верхней части стека истории и ответный удар стрелка будет просто вернуться к последней отдельной фотостраничку вместо страницы поиска, создавшего список альбомов, в первую очередь , Любые предложения о доступе к стеку истории? d, а не зависеть от решений каждого отдельного действия фото подтолкнуть их путь к отдельному месту, так что делает его хрупким (каждая фотографию действие строится другим разработчиком и добавление новых действий в будущем потребует предыдущих знаний, чтобы помнить, чтобы сделать это). Я не могу пойти на жесткий кодированный путь, потому что бы быть прижаты к верхней части стека истории и ответный удар стрелка будет просто вернуться к последней отдельной фотостраничку вместо страницы поиска, создавшего список альбомов, в первую очередь , Любые предложения о доступе к стеку истории? т перейти к жестко закодированного пути, потому что бы быть прижаты к верхней части стека истории и ответный удар стрелка будет просто вернуться к последней отдельной фотостраничку вместо страницы поиска, создавшего список альбомов, в первую очередь. Любые предложения о доступе к стеку истории? т перейти к жестко закодированного пути, потому что бы быть прижаты к верхней части стека истории и ответный удар стрелка будет просто вернуться к последней отдельной фотостраничку вместо страницы поиска, создавшего список альбомов, в первую очередь. Любые предложения о доступе к стеку истории?
John P
1

голосов
0

ответ
176

Просмотры

React HOC with Context - should not use and in the same route

So I am running into the infamous React Router v4 warning: Warning: You should not use and in the same route; will be ignored This happens after wrapping my component, which itself renders a inside my HOC which provides my React context. This all looks a bit like this: App.js: ... my stores.js file includes the following: export const withMainStore = (Component) => { return (props) => { return ( {store => ( )} ) } } myLayout.js: class myLayout extends React.Component { const { Component, ...rest } = this.props; // ... render() { return ( ( )}/> ) } } export default withMainStore(myLayout) I hope my whole situation here is somewhat clear. can someone explain to me why the warning occurs? At NO point in my whole app, I have something like: ... - I am always using ( ... )} />! So I got no idea why this is happening. I has to have something todo with my withMainStore HOC, because when I remove it the error is gone. but still I do not understand why this causes the error.
1

голосов
0

ответ
53

Просмотры

На освежающей странице реагировать маршрутизатор состояния показывает старое состояние

Я использую реагировать маршрутизаторы-РОМ версии 4.2.2. В моем приложении, у меня есть две страницы. Я использую ссылку для перенаправления и я передаю состояние, пока идет со 2 страницы на 1-ой странице, чтобы показать уведомление. На основании состояния успеха, я решил показать уведомление. После возвращения в page1, если я обновить эту страницу, я продолжаю видеть уведомление, так как реагировать-маршрутизатор состояние не очищается. Я просто хочу, чтобы показать уведомление, когда я вернусь в page1 из page2. Так как я очищаю реагировать маршрутизаторы состояния без перенаправления на тот же путь? Как я могу решить эту проблему?
Vishvesh Oza
1

голосов
1

ответ
96

Просмотры

Восстановление прежнего состояния в Redux при переходе назад в истории с React-маршрутизатор

У меня есть React / Redux приложение, которое использует React-маршрутизатор. Приложение имеет область поиска, которые давайте искать пользователей по пунктам. Есть ~ 200 пунктов, поэтому они предварительно загружаются при запуске приложения. Поиск только фильтрует эти элементы, не делая какие-либо дополнительные запросы к серверу. Когда пользователь нажимает на одну из деталей, маршрутизатор переходит к деталям этого элемента. Есть ли лучший ™ / общий / универсальный способ я могу сохранить результаты и положение прокрутки и, если пользователь нажимает на ВЕРНУТЬСЯ в детальном просмотре восстановить их?
alexandernst
1

голосов
0

ответ
108

Просмотры

Исключить черный список точных маршрутов на маршрутизаторе Реагировать DOM

У меня есть компонент NavBar, который я хочу, чтобы отобразить на каждый маршрут, за исключением / логин и /. Я пытался делать следующее: Тем не менее, так как / будет соответствовать почти каждому маршруту, когда не точно, это в значительной степени не будет оказывать. Как я мог бы черный список несколько путей для визуализации компонента?
corvid
1

голосов
0

ответ
54

Просмотры

Как создать ссылки, которые имеют динамический префикс URL?

В моем проекте, у меня есть два маршрута, которые показывают один и тот же компонент. То, что я хочу, чтобы произошел это сделать компонент Link в пути = «/ один» привести к / один / например, и пути = «/ два» приводят к / два /. Например, Тем не менее, я не могу использовать реагировать-маршрутизатор BASENAME пропеллер, потому что не все ссылки будут иметь одинаковый префикс. В настоящее время я прохожу в качестве опоры URLPrefix и вручную, добавляя его к каждой Ссылке =. Это не очень чистый раствор и включает в себя бурение реквизита глубоко в дерево компонентов. <Пример {...} реквизита URLPrefix = "/ один" />} /> Кто-нибудь есть хороший, DRY решение этой проблемы?
Alex

Просмотр дополнительных вопросов

Связанные вопросы