«react-router» 태그된 질문

라우팅에 반응하여보기를 변경하는 데 문제가 있습니다. 사용자 목록 만 표시하고 각 사용자를 클릭하면 세부 정보 페이지로 이동해야합니다. 라우터는 다음과 같습니다. 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(( …

87 reactjs  react-router 

react-router 및 react-bootstrap을 사용하여 스타일링 문제가 있습니다. 아래는 코드 스 니펫입니다. import { Route, RouteHandler, Link } from 'react-router'; import AuthService from '../services/AuthService' import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap'; <Nav pullRight> <NavItem eventKey={1}> <Link to="home">Home</Link> </NavItem> <NavItem eventKey={2}> <Link to="book">Book Inv</Link> </NavItem> <NavDropdown eventKey={3} title="Authorization" …

85 react-router  react-bootstrap 

반응 라우터에 문제가 있습니다 (버전 ^ 4.0.0을 사용하고 있습니다). 이것은 내 index.js입니다 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, Link, browserHistory } from 'react-router'; ReactDOM.render( <Router history={browserHistory} > <Route path="/" component={App} /> </Router>, document.getElementById('root') ); App.js는 그저 아무것도 아닙니다. …

85 javascript  json  reactjs  react-router 

React Router 가 새 탭에서 링크를 열 도록하는 방법이 있습니까? 나는 이것을 시도했지만 작동하지 않았습니다. <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> onClick="foo"위와 같이 링크 에 추가하여 플러 프 할 수 있지만 콘솔 오류가 발생합니다. 감사.

85 reactjs  react-router 

내가 이해하는대로 및 같은 라우팅 관련 소품을 <Route path="/" component={App} />제공합니다 . 내 구성 요소에 중첩 된 하위 구성 요소가 많이있는 경우 하위 구성 요소가 다음없이 이러한 소품에 액세스하도록하려면 어떻게해야합니까?ApplocationparamsApp 앱에서 소품 전달 창 개체 사용 내포 된 하위 구성 요소에 대한 경로 작성 this.context.router경로와 관련된 정보가있을 거라고 생각했는데 경로 …

85 javascript  reactjs  react-router 

다음과 같은 라우터가 있습니다. <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Login}/> </Route> </Router> 내가 달성하고 싶은 것은 다음과 같습니다. /login로그인하지 않은 경우 사용자를로 리디렉션 사용자 /login가 이미 로그인 한 상태에서 액세스를 시도한 경우 루트로 리디렉션합니다./ 그래서 지금은에서 사용자의 상태를 확인하기 위해 노력하고있어 AppS ' componentDidMount, 무언가를 좋아한다 …

83 javascript  reactjs  react-router 

누구든지 react-router에서 특정 경로에 대한 액세스를 제한하는 방법을 알고 있습니까? 특정 경로에 대한 액세스를 허용하기 전에 사용자가 로그인했는지 확인하고 싶습니다. 간단 할 거라고 생각했지만 문서에 방법이 명확하지 않습니다. <Route>구성 요소를 정의 할 때 설정 해야합니까, 아니면 구성 요소 처리기 내에서 처리해야합니까? <Route handler={App} path="/"> <NotFoundRoute handler={NotFound} name="not-found"/> <DefaultRoute handler={Login} name="login"/> …

83 javascript  reactjs  react-router 

내 반응 사이트에서 Google Analytics를 설정하려고하는데 몇 가지 패키지를 발견했지만 그중 어느 것도 예제 측면에서 설정 한 종류가 없습니다. 누군가가 이것에 대해 밝힐 수 있기를 바랐습니다. 내가보고있는 패키지는 react-ga 입니다. 내 렌더링 방법은 index.js다음과 같습니다. React.render(( <Router history={createBrowserHistory()}> <Route path="/" component={App}> <IndexRoute component={Home} onLeave={closeHeader}/> <Route path="/about" component={About} onLeave={closeHeader}/> <Route path="/gallery" …

82 google-analytics  reactjs  react-router 

reactjs 라우터의 Link 구성 요소를 사용하고 있는데 onClickevent가 작동하지 않습니다. 다음은 코드입니다. <Link to={this.props.myroute} onClick='hello()'>Here</Link> 이것이 그것을하는 방법입니까 아니면 다른 방법입니까?

82 reactjs  react-router  react-redux 

이 React Router Dom v4 예제 https://reacttraining.com/react-router/web/example/auth-workflow 를 보면 PrivateRoute 구성 요소가 다음과 같은 나머지 소품 을 분해 한다는 것을 알 수 있습니다. const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', …

82 reactjs  react-router 

몇 주 전에 나온 React Router의 새로운 useHistory 후크를 사용하고 있습니다. 내 React-router 버전은 5.1.2입니다. 내 반응은 버전 16.10.1입니다. 하단에서 내 코드를 찾을 수 있습니다. 그러나 반응 라우터에서 새 useHistory를 가져올 때 다음 오류가 발생합니다. Uncaught TypeError: Cannot read property 'history' of undefined 이것은 React-router 에서이 줄로 인해 발생합니다 function …

18 reactjs  react-router  react-hooks  react-router-dom  react-context 

TypeScript를 사용하여 반응 라우터 v5.1.2에서 UseHistory 후크를 사용하고 있습니까? 단위 테스트를 실행할 때 문제가 있습니다. TypeError : 정의되지 않은 'history'속성을 읽을 수 없습니다. import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My …

17 reactjs  typescript  react-router  jestjs  enzyme 

Next.js의 새로운 기능으로 시작 페이지 ( / )에서 / hello-nextjs 로 리디렉션하는 방법이 궁금합니다 . 사용자가 페이지를로드 한 후 path === / / hello-nextjs로 리디렉션 되는지 확인 에서이 반응 라우터 우리가 그런 짓을 : <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => …

15 html  reactjs  routing  react-router  next.js 

URL 매개 변수 (id)를 가져 와서 구성 요소를 추가로 채우는 반응 라우터-라우트를 기반으로 세부 정보보기를로드하려고합니다. 내 경로는 다음과 같이 /task/:idURL에서 : id를 가져 오려고 할 때까지 구성 요소가 제대로로드됩니다. import React from "react"; import { useParams } from "react-router-dom"; class TaskDetail extends React.Component { componentDidMount() { let { id } …

14 reactjs  react-router 

React 단일 페이지 응용 프로그램을 구축 중이며 Chrome 및 기타 브라우저에서 스크롤 복원이 예상대로 작동하지 않는 것으로 나타났습니다. (가) github에 REPO 라우터-DOM 반응에, 그들은 브라우저가되는 것을 말한다 페이지가 스크롤 기본적으로 핸들에 시작하는 경우, 단일 페이지 응용 프로그램에 대한, 그리고 행동이 기존의 비 SPA 웹 페이지와 유사한 것 history.scrollRestoration으로 설정을 auto. …

11 javascript  reactjs  google-chrome  react-router