Популярные вопросы по тегу REACT-ROUTER

Вы не должны использовать Route или withRouter() вне маршрутизатора при использовании response-router 4 и styled-component в react

... ользовать Link вместо NavLink, но тоже 1 получаю ошибку (Вы не должны использовать Link вне маршрутизатора) Кто-нибудь, помогите мне, пожалуйста. navigationBar.js import React, { Component } from 'react'; import { NavigationContainer, NavItem } from './navigationBar.style'; class NavigationBar extends Component { render() { return ( <NavigationContainer> <NavIte ...

Как передать параметры в ссылке response-router-dom?

... ь параметр, например userId. Мне 5 нужно передать это в Ссылке. Я знаю, как 4 передавать параметры в onCLick(): this.props.router.push({ pathname: '/', state: { userId: 7 } }) Насколько я понимаю, чернилами 3 можно выполнить onClick, но, мож ...

React Router Error, связанный с Link To

... homecontent')) //ReactDOM.render(<LoginForm />, document.getElementById('loginform')); //ReactDOM.render(<BoRegistration />, document.getElementById('boRegistration')); //ReactDOM.render(<VoRegistration />, document.getElementById('voRegistration')); //ReactDOM.render(<ourAdvantages />, docu ...

Простейший тест для ссылки на response-router с @ testing-library / react

... новый компонент, но это добавляет много 1 шаблонов к тесту. Вот мой пример неудачи: import { MemoryRouter } from 'react-router-dom'; import { render } from '@testing-library/react'; import { createMemoryHistory } from 'history'; it('routes to a new route', async () => { const history = createMemoryHistory(); const { getByText } = render( <MemoryRouter history={history}> <Link to="/hello"> ...

Как рутировать без перезагрузки всей страницы?

... eware=applyMiddleware(thunkMiddleware)(createStore); var store=createStoreWithMiddleware(reducer); store.dispatch(actions.load_contacts()) //////////// <<<<<< this is what i call to store data already ReactDOM.render( <Provider store={store}><Index/></Provider> , document.getElementById('content')) Проблема в том, что мне нужно ...

Обнаружение изменения маршрута с помощью response-router

... ее: reactRouter.onUrlChange(url => { this.history.push(url); }); Есть ли способ 2 получить обратный вызов от response-router 1 при об ...

Перехватчик useParams в React Router возвращает пустой объект

... theme}> <Router basename="/pending-nominations"> <PageNav/> <Switch> <Route path="/history"> <History/> </Route> <Router path="/view/:id"> <SingleRecognition/> </Router> ...

Недопустимый заголовок хоста "при запуске приложения React.

... проекте следующие зависимости. "webpack": "^2.2.0", "webpack-dev-server": "^1.14.1", "react": "^15.5.4", "react-router-dom": "^4.1.1" Также 7 я запускаю свой проект с помощью приведенного 6 ниже сценария сборки. "build": "SET NODE_ENV=production && webpack-dev-server --host 0.0.0.0 --inline --history-api-fallback --content-base . " В OSE все идет ...

NavLink активен для одной и той же ссылки для нескольких URL-адресов в React Router DOM

... я все еще нахожусь на 9 родительской странице, просто меняя URL-адрес 8 для вкладки. проблема в том, что я не могу 7 сохранить родительскую страницу NavLink 6 активной, когда я нажимаю на вкладку, потому 5 что она меняет URL-адрес, но я хочу, чтобы 4 он оставался активным в URL-адресе вкладок. Как 3 это сделать? импортировать React из React; импортировать 2 {NavLink} из 'response-router-dom'; export default () => { return ...

React Navigate Router v6 недопустимый вызов ловушки

... console.log("please enter password"); } else { console.log("username of login: ",this.state.username); axios.post(process.env.REACT_APP_DATAURL + `/login`,{ username: username, password: password },{withCredentials: true}) .then(res => { res = res.data; console.log(res); ...

response-router v5.1.0 Невозможно прочитать свойство 'location' из undefined,

... </Switch> </App> </Main> </Container> </BrowserRouter> </> ); } const Container = styled.div` min-height: 100vh; `; К сожалению, я получаю следующую 2 ошибку Uncaught TypeError: Cannot read property 'location' of undefined at useLocation (app.js:54283) at app.js:72 ...

Как установить DefaultRoute на другой маршрут в React Router

... "dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> При использовании 12 Defaul ...

Получение сообщения «Невозможно вызвать класс как функцию» в моем проекте React

... ReactDOM.findDOMNode(mapRef); let zoom = 14; let lat = 37.774929 let lng = 122.419416 const center = new maps.LatLng(lat, lng); const mapConfig = Object.assign({}, { center: center, zoom: zoom }) this.map = new maps.M ...

React Router Dom v6 показывает активность для индекса, а также для других подмаршрутов

... аницу, отмеченную синим цветом. Поэтому, когда 3 я нахожусь на /dashboard, он показывает Дом синим 2 цветом. Но когда я нахожусь на /dashboard/profile, и дом, и 1 профиль отображаются синим цветом <li> <NavLink to=''> {({ isActive }) => isActive ? ( <text style={{color: blue}}>Home</text> ) : ( <text>Home</text&gt ...

Реакция: чтение данных, переданных как параметр в history.push

... s.password.value = ""; } }) .catch((error) => { console.error(error); }); this.refs.usrname.value = ""; this.refs.password.value = ""; } так что до 4 сих пор все в порядке, но теперь мне нужно 3 прочитать переданные данные, то есть role_id и 2 userName на следующей странице, то есть Taskactive . Итак, к ...

Как добавить реагирующий маршрутизатор <Link> для каждой строки таблицы Material-UI?

... затор response-router-dom как добавить ссылку в каждый цикл .map 1 в Table TableRow? import React, { Fragment } from 'react' import { Paper } from 'material-ui' import Table from 'material-ui/Table'; import TableBody from 'material-ui/Table/TableBody'; import TableCell from 'material-ui/Table/TableCell'; import TableHead from 'material-ui/Table/TableHead'; import TableRow ...

Как вернуться к предыдущему маршруту в react-router-dom v6

... ернуться к предыдущему маршруту с 2 помощью истории. history.goBack() Как я могу добиться ...

Авторизация маршрутизатора React

... монтированием компонента? Я использую 2 response-router 1.x Вот мои маршруты React.render(( &lt;Router history={History.createHistory()}&gt; &lt;Route path="/" component={Dashboard}&gt;&lt;/Route&gt; &lt;Route path="/login" component={LoginForm}&gt;&lt;/Route&gt; &lt;/Router&gt; ), document.body); Вот мой 1 компонент Dashboard: var Dashboard = React.createClass({ componentWillMount: function () { // I want to ...

Ошибка 404 Nextjs при перезагрузке / обновлении

... локальная машина) все 20 работает нормально. И статические, и динамические 19 маршруты работают правильно и получают данные 18 из основного веб-API dontnet. Однако при 17 публикации приложения Nextjs выполните следующие 16 действия: сборка пряжи экспорт пряжи В корне проекта создается исходящая папка. Содержимое этой папки загружается на сервер. После того, как развернутые файлы 15 загружаются, и при входе ...

React Router: невозможно прочитать свойство pathname из undefined

... ire('react-dom'); var { Route, Router, IndexRoute } = require('react-router'); var hashHistory = require('react-router-redux') var Main = require('./components/Main'); ReactDOM.render( &lt;Router history={hashHistory}&gt; &lt;Route path="/" component={Main}&gt; &lt;/Route&gt; &lt;/Router&gt;, document.g ...

На React Router, как оставаться в системе даже при обновлении страницы?

... ированных 11 данных состояния в localStorage может сработать, но 10 в этом случае я должен проверять, что все 9 вызовы AJAX терпят неудачу, этот запрос 8 отклонен, потому что сеанс истек или не 7 существует, как что-то, и это тоже кажется 6 плохой идеей. Есть ли способ решить эту 5 проблему проще? Мой веб-сайт должен обслуживать ...

Для чего нужен withRouter в response-router-dom?

... { // ... } export default withRouter(Foo); Для чего это нужно 1 и когда мне его испол ...

Как эмулировать window.location с помощью классов response-router и ES6

... вроде: this.context.router.transitionTo(mylink);, я получаю 7 Cannot read property 'transitionTo' of undefined (если я пытаюсь сделать что-то вроде set 6 this.context = context внутри конструктора). Чтобы 5 не затягивать, но я также устал слишком 4 много возиться с контекстом, поскольку он 3 намеренно недокументирован, так как работа 2 над ним еще не зав ...

Как сделать так, чтобы кнопка реагирования пользовательского интерфейса материала действовала как ссылка response-router-dom?

... rial UI Button как 4 компонент Link из react-router-dom, не теряя при этом своего 3 первоначального стиля? Как изменение маршрута 2 при нажатии. import Button from '@material-ui/core/Button'; &lt;Button variant="contained ...

Страница по умолчанию для реактивного маршрутизатора v4 (страница не найдена)

... , Link } from 'react-router-dom' class Layout extends Component { render() { return ( &lt;Router&gt; &lt;div className=&quot;App&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;&lt;/li&gt; &lt;li&gt;&lt;Link to=&quot;/user&quot;&gt;User&lt;/Link&gt;&lt;/li&gt; &lt;/ul&gt; ...

Поведение коммутатора React router

... e! &lt;/div&gt; ); } } Раньше 12 у меня был div, оборачивающий маршруты вместо 11 Switch. В этом случае я вижу отрисовку App и пытаюсь 10 щелкнуть ссылку «Холодильник», но ничего 9 не происходит (FridgePage не отображается), и на ко ...

React JS React-router-dom Navigate не работает

... click={() =&gt; this.logout()}&gt;Deconnexion&lt;/Bouton&gt; ) } } export default Dallan; А в моем App.js function App() { let session = localStorage.getItem('logged'); return ( &lt;BrowserRouter&gt; &lt;Routes&gt; &lt;Route path=&quot;/&quot; element={session ? &lt;Navigate to=&quot;/dallan&quot; /&gt; : &lt;Login/&gt;} /&gt; &lt;Route path= ...

Невозможно прочитать свойство params из undefined (React Router 4)

... ct path="/page/:id" location={this.props.location} key={this.props.location.key} render={({ location }) =&gt; ( &lt;PageStart key={this.props.location.key} /&gt; )} /&gt; Затем внутри этого компонента 3 (PageStart) у меня есть: this.props.match.params.id Но выдает ошибку: Cannot read property 'para ...

React Router browserHistory. Нажмите открыть ссылку в новой вкладке

... к &lt;Link to="route" target="_blank"&gt; , чтобы открывать 2 ссылки в новой вкладке. Но можно ли использовать 1 b ...

Как перенаправить с перехватчика axios с помощью React Router V4?

... Do something with response data return response; }, function (error) { // Do something with response error if(error.response.status === 403) { console.log(&quot;Redirection needed !&quot;); } // Trow errr ag ...

Получить путь к корневому URL-адресу React

... авливаю 8 src изображения на /images/example.png, он работает только 7 на локальном хосте, но не в производственной 6 среде, потому что в производственной среде 5 браузер ищет изображение в example.com/images/example.png вместо example.com/interface/images/example.png Вот почему 4 мне нужно получить корневой URL-адрес реакции. Это 3 позволяет мне получить "/" в localhost и 2 "/ interface /", например, в продакшене Спасибо 1 з ...

Next.js Router.push() автоматически перезагружает страницу

... е вызывая перезагрузку 4 полной страницы - это мульти -шаговая форма. Другими 3 словами, я хочу иметь возможность перемещаться 2 между этапами формы, также обновл ...

React-router не загружает css для вложенных страниц при обновлении

... ort './assets/plugins/morris/morris.css'; import './assets/css/bootstrap.min.css'; import './assets/css/core.css'; import './assets/css/components.css'; import './assets/css/icons.css'; import './assets/css/pages.css'; import './assets/css/menu.css'; import './assets/css/responsive.css'; render( &lt;Router history={browserHistory}&gt; &lt;Route path="/" component={Dashboard}/&gt; &lt;Route path="/components/:nam ...

Макет страницы нарушен в React Router v6

... ment={&lt;Diary /&gt;} /&gt; &lt;Route path=&quot;/results&quot; element={&lt;Results /&gt;} /&gt; &lt;Route path=&quot;/details&quot; element={&lt;Details /&gt;} /&gt; &lt;Route path=&quot;/about&quot; element={&lt; ...

Как создать динамический маршрут в gatsby

... ня есть проект gatsby, использующий 6 этот link. Работает правильно. Теперь я знаю, как 5 создать маршрут, определив ко ...

В чем заключается компромисс между выталкиванием истории и заменой?

... а страницу 404 в моем компоненте 6 реакции. Я использую .replace вместо .push просто потому, что 5 не хочу, чтобы браузер запи ...

Свойство "состояние" не существует для типа "FetchPeriod"

... ство 4 'состояние' не существует для типа 'FetchPeriod' Это 3 код: import * as React from 'react'; import { RouteComponentProps } from 'react-router'; import { Link, NavLink } from 'react-router-dom'; interface FetchPeriodDataState { periodList: PeriodData[]; loading: boolean; } export class FetchPeriod extends React.Component&lt;RouteComponentProps&lt;{}&gt;, FetchPeriodDataState&gt; { constructor(props) { super(pro ...

Проверка объекта маршрута как реквизит в React

... рута? Мой 1 код: var bla = React.createClass({ displayName: 'bla', propTypes: { route: React.PropTypes.object, }) class RootRoute extends React.Component { render() { return ( &lt;Router history={hashHistor ...

React - Как лучше всего обрабатывать вход в систему и аутентификацию?

... то вместе его взломали. Прямо 20 сейчас мое состояние isAuthenticated находится в моем routes.js вот 19 так: class Routes extends Component { constructor(props) { super(props); this.state = { isAuthenticated: false, } } На моей страниц ...

Реагировать - как правильно делать глобальное состояние?

... act 2 поделиться информацией о пользователях во 1 всем мире? const App = () =&gt; { const [user, setUser] = useState(null); return ( &lt;Router&gt; &lt;div className=&quot;app&quot;&gt; &lt;Topbar /&gt; &lt;Switch&gt; &lt;Route path=&quot;/login&quot; exact component={Login} /&gt; &lt;Route path=&quot;/home&quot; exact component={Home} ...

TypeError: date [("get" + method)] не является функцией в React-big-calendar

... { this.openPopupForm(slotInfo); //OPEN POPUP FOR CREATE/EDIT EVENT } //POPUP-FORM FUNCTION FOR CREATE AND EDIT EVENT openPopupForm = (slotInfo) =&gt; { let newEvent = false; let popupTitle = "Update Event"; if(!slotInfo.hasOwnProperty('id')) { slotInfo.id = moment().format('x'); //Generate id with Unix Millisecond Timestamp slotInf ...

Как разрешить маршрутизатору ответить кодом состояния 404?

... уживает, что URL-адрес 14 не соответствует ни одному из определенных 13 компонентов, он отображает компонент NoMatch. И 12 вот проблема: отображается NoMatch, и это 11 то, что я хочу, но код состояния по-прежнему 10 200 вместо 404. И когда мои файлы css или 9 js помещаются с неправильным URL-адресом, маршрутизатор 8 реагирует то же самое, он отвечает 200 ! А 7 затем страница сообщает мне, что возникла 6 проблема с типом содержимого моих ре ...

React Js, добавление нового объекта в массив

... s.state.buyItems.push(obj); console.log(this.state.buyItems); } render(){ const {buyItems,message} = this.state; return ( &lt;div className="container"&gt; &lt;form className="form-inline" onSubmit={(e) =&gt; {this.addItem(e)}}&gt; &lt;div className="form-group"&gt; &lt;label className="sr-only" htmlFor="newItemInput"&gt;Add New ...

Как рендерить разные макеты с помощью React?

... t } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import PublicLayout from './components/layouts/PublicLayout'; import SigninLayout from './components/layouts/SigninLayout'; import Main from './components/pages/Main'; import Services from './ ...

React Router - как ограничить параметры в сопоставлении маршрутов?

... а? &lt;Router&gt; &lt;Route path="/:alpha_index" component={Child1} /&gt; &lt;Route path="/:numeric_index" component={Child2} /&gt; &lt;/Ro ...

react-router-dom v6 useNavigate передача значения другому компоненту

... async function fetchUrl(url) { const response = await fetch(url); const json = await response.json(); setLeads(json[0]); setLoading(false); } useEffect(() =&gt; { fetchUrl(&quot;http://localhost:5000/api/leads&quot;); }, []); function redirectToReport(rowData) { navigate('/app/report', { state: rowData }); // ??? I'm not sure if this is the right way } return( &lt;div&gt; &lt;TableRows leads={leads} ...

Как получить историю на react-router v4?

... eact-Router v3 на v4. в версии 3 я мог 6 делать это где угодно: import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); Как этого добиться 5 в версии 4 Я знаю, что могу использовать 4 hoc withRouter, контекст реакции или свойства ...

response-router ничего не отображает

... &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt; ); } } export default Header; мой App.js. import React, { Component } from 'react'; import Header from './Header'; class App extends Component { render() { ...

Как передать параметры с помощью history.push / Link / Redirect в react-router v4?

... props.history.push('/page') в React-Router v4? .then(response =&gt; { var r = this; if (response.status &gt;= 20 ...

Компонент не перемонтируется при изменении параметров маршрута

... URL-адресом: myapplication.com/project/unique-project-id Когда компонент 10 проекта загружается, я инициирую запрос 9 данных для этого проекта из события componentDidMount. Теперь 8 я столкнулся с проблемой, когда, если я 7 переключаюсь напрямую между двумя проектами, только 6 идентификатор изменяется следующим образом 5 ... myapplication.com/project/982378632 myapp ...