3
голоса
Принятый
React - передача состояния между разными компонентами
В App объявить колбек:
onSubmited = () => {
}
Прокинуть в Auth:
<div className="col-lg-3" onSubmited={this.onSubmited}><Auth /></div>
В Auth он будет в props. Поэтому в ...
3
голоса
Принятый
Как в react router v4 сделать switch с вложенными компонентами?
Switch перебирает children и стопорит перебор, когда нужный роут найден. У вас в Switch две ноды... В общем нужно убрать обёртку App. Если вам нужно обернуть часть страниц в App, то можно сделать так:
...
3
голоса
Принятый
componentDidMount() не работает при роутинге с динамическим url
Без полного кода сложно сказать, но очевидно, что компонент не инициализируется второй раз, а обновляется. Это можно проверить в componentWillReceiveProps(). Если второй раз вызывается ...
3
голоса
Проблема в экспорте react-routera
hashHistory был перенесен в 4 версии пакета из react-router в новый пакет - react-router-dom поэтому в 3 версии он еще работает. Ссылка на issue: hashHistory stopped working in 4.0.0
Установите ...
3
голоса
Принятый
Как установить точный маршрут в адресной строке при запуске приложения, используя react-router-dom?
Самый простой вариант, на мой взгляд, это использовать редирект. Просто рядом с рутами нужно написать следующую строку:
<Redirect from="/" to="/auth/pages"/>
Это выполнит редирект из корневого ...
3
голоса
Как сделать перенаправление на исходную страницу после авторизации React
Можно воспользоваться Redirect из библиотеки react-router:
import { Redirect } from "react-router"
const YourComponent = () => {
const [state, setState] = setState({ redirect: false })...
3
голоса
Принятый
Как скрыть компонент Footer при определенном URL
В том месте, где выводится Footer, нужно добавить Route и использовать его свойство render. Это функция, которая принимает объект со всей информацией по маршруту - там уже можно сделать проверки и ...
3
голоса
React Router: this is undefined
В классовом компоненте нужно добавить конструктор (и начальное состояние тоже в конструкторе нужно объявить):
constructor(props) {
super(props);
this.state = {
cars: [
{ name: "Ford&...
2
голоса
componentDidMount() не работает при роутинге с динамическим url
Нашел два решения.
Первое - добавил key-аттрибут на компонент, key изменяется (беру из роутинга) и это заставляет реакт перемонтировать компонент
let name = this.props.params.element;
...
<...
2
голоса
Принятый
Как повесить переход по ссылке на произвольное событие. ReactJs. React-router
У react-router доступен объект router в контексте...
class TabMenu extends React.Component {
static contextTypes = {
router: React.PropTypes.object,
};
handleClick(...) { // тут нужно ...
2
голоса
Принятый
Бесконечный вызов lifecycle методов React компонента
У вас проблема в том, что роут / является префиксом для /login, а потому при редиректе на /login активируется снова первый роут.
Используйте exact чтобы проверить полное совпадение а не совпадение по ...
2
голоса
При обновлении страницы пишет "Cannot GET /login" - BrowserRouter от react-router-dom
Может, кому-то поможет: мне помогло добавление следющего кода в webpack.config.js
devServer: {
historyApiFallback: true,
}
2
голоса
Принятый
Не обновляется компонент в react-router v4
Доброго времени суток.
Может проблема в том, что после нажатия на линк компонент проходит по update жизненным методам, т.е. constructor не вызывается и поэтому значение из match.params не ...
2
голоса
Принятый
React-router v3 404 при обновлении страницы
.htaccess
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
2
голоса
Принятый
React.router.NavLink + material-ui.Button - передача состояния одного в другое
Я решил сделать это таким способом:
import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import { NavLink } from ...
2
голоса
Принятый
Аутентификация React
Не могу понять как мне отображать PrivatePage при загрузке приложение если куки уже получен, но пользователь закрыл и снова открыл приложение.
При каждом запросе к серверу вместе с запросом должен ...
2
голоса
Как убрать Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`
В component требуется передать объект, а вы передаете в него функцию-обертку. В вашем случае лучше использовать свойство render
<Route
exact
path="/"
render={(props) => <...
2
голоса
Как правильно передать props в компонет
Просто добавьте после ...props через запятую имя функции, если она определена локально и вы хотите ее передать под тем же именем.
Пример:
function foo() {...}
...
<Route exact path="/login" ...
2
голоса
Принятый
Программа заходит в обе ветви if
<div>
<div className="App">
<Navbar />
<Requests data={arrayOfRequests} /> <-- есть data
<BrowserRouter>
<Route exact path='/' ...
2
голоса
Принятый
Ломается роутинг при сокращении кода
А почему бы проста все с похожим роутем не вместить в массив?
Рабочий codesandbox
Вот так:
function App() {
const path = ["/hamburger", "/cheeseburger", "/chickenburger", "/fishburger"];
...
2
голоса
Принятый
Как React Router грузит модули? Можно ли сделать полосу загрузки?
Да можно при помощи lazy loading:
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
const Drums = lazy(() => import('./...
2
голоса
Принятый
React работа с атрибутами простого тега, или как картинку из 1 тега переместить в другой
Во-первых, такое поведение можно сделать с помощью css см пример:
https://ruseller.com/lessons.php?rub=2&id=1226
Во-вторых, решение может сильно зависеть от html-скелета, но в целом, в событии ...
2
голоса
Как установить точный маршрут в адресной строке при запуске приложения, используя react-router-dom?
// В компоненте объявляем
import React, { useEffect } from 'react'
import { useHistory } from 'react-router'
const MyComponent = () => {
const { push } = useHistory()
// И скажем в useEffect()
...
2
голоса
Как сделать рендер элемента при определенном условии?
1 вариант:
Если пишешь функциональные компоненты, то есть хук useHistory
import { useHistory } from 'react-router-dom';
Внутри компонента (где происходит авторизация, как я понимаю, это компонент ...
2
голоса
Принятый
Пересоздается компонент, вызываемый Route
Так происходит потому что useEffect вызывается всегда когда происходит rerender компонента (получается аналог componentDidUpdate).
В результате получается так: ajax ->rerender->ajax->rerender....
2
голоса
Примеры написание блога на Реакте?
В данном случае Вам лучше всего воспользоваться роутингом, сам пользовался react-router-dom, в реакте при использовании этого пакета при изменении url'а можно менять содержимое сайта, таким образом на ...
2
голоса
Ошибка в TypeScript "объекты недействительны в качестве дочерних элементов React"
В вопросе указаны две ошибки:
неверно указан generic параметр в useParams. Проблема заключается в том, что все параметры опциональны, а значит могут отсутствовать, в то время, как
interface ...
2
голоса
Принятый
Как указать тип обьекта который передали в компонент
Возможно Вы просто не экспортируете интерфейс?
export interface ArrayTS {
readonly id: string;
color?: string;
size: {
width: number;
heidth: number;
};
dynamicVariable: any;
...
1
голос
Проброс значения url в контейнер (react)
Используйте параметры для описания пути:
<Route path={'/test(/:param1/:param2)'} component={YourComponent} />
Далее подключаете react-router к вашему контейнеру:
import {withRouter} from '...
1
голос
Принятый
Что лучше использовать для получения текущего урла?
Однозначно, я бы рекомендовал использовать withRouter. Вы же используете React, так используйте его вспомогательные и удобные средства. Думаю, тут выбор очевиден.
Сначала импортируем его в нашем ...
Only top scored, non community-wiki answers of a minimum length are eligible
Связанные метки
react-router × 235reactjs × 225
javascript × 97
react-router-dom × 63
redux × 20
react-hook × 15
typescript × 12
react-native × 11
jsx × 11
node.js × 8
express × 6
create-react-app × 5
route × 5
router × 5
html × 4
nextjs × 4
webpack × 3
redirect × 3
маршрутизация × 3
material-ui × 2
mobx × 2
jquery × 1
django × 1
веб-программирование × 1
bootstrap × 1