Perguntas com a marcação «react-router»

Às vezes, tenho visto pessoas embrulhar seus componentes withRouterao exportá-los: import { withRouter } from 'react-router-dom'; class Foo extends React.Component { // ... } export default withRouter(Foo); Para que serve isso e quando devo usá-lo?

109 reactjs  react-router 

Andei pensando e me confundi com o roteamento entre Cliente e Servidor. Suponha que eu use ReactJS para renderização do lado do servidor antes de enviar a solicitação de volta ao navegador da web, e use o react-router como um roteamento do lado do cliente para alternar entre as páginas …

108 javascript  reactjs  routes  react-router  url-routing 

Estou fazendo a transição do meu app react de webpack-dev-server para nginx. Quando vou para o url raiz "localhost: 8080 / login", simplesmente obtenho um 404 e, no log do nginx, vejo que ele está tentando obter: my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such …

107 nginx  react-router 

Há alguma maneira de evitar que /#/apareça na barra de endereços do navegador ao usar o react-router? Isso é com ReactJS. ou seja, clicar em links para ir para uma nova rota mostralocalhost:3000/#/ ou localhost:3000/#/about. Dependendo da rota.

103 reactjs  react-router 

Não entendo qual é o propósito de usar um IndexRoute e IndexLink . Parece que, em qualquer caso, o código abaixo teria selecionado o componente Home primeiro, a menos que o caminho About fosse ativado. <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> vs <Route path="/" component={App}> <Route path="home" …

102 javascript  reactjs  react-router  url-routing 

Eu sou novo no React Router e aprendi que existem muitas maneiras de redirecionar uma página: Usando browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); Usando this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { …

102 reactjs  redux  react-router 

Estou tendo um pequeno problema ao migrar do React-Router v3 para v4. na v3, consegui fazer isso em qualquer lugar: import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); Como faço para conseguir isso na v4. Eu sei que poderia usar o hoc withRouter, o contexto de reação ou os adereços do …

101 reactjs  react-router 

Tentando fazer com que react-router (v4.0.0) e react-hot-loader (3.0.0-beta.6) funcionem bem, mas obtendo o seguinte erro no console do navegador: Aviso: React.createElement: type é inválido - esperava uma string (para componentes embutidos) ou uma classe / função (para componentes compostos), mas obteve: indefinido. Você provavelmente se esqueceu de exportar seu …

99 reactjs  react-router  react-hot-loader 

Eu tenho o seguinte: <Route name="app" path="/" handler={App}> <Route name="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> Ao usar o DefaultRoute, SearchDashboard é renderizado incorretamente, pois qualquer * Dashboard precisa ser renderizado dentro do Dashboard. Eu gostaria …

98 javascript  routes  reactjs  url-redirection  react-router 

Estou trabalhando em um aplicativo react usando o react-router. Tenho uma página de projeto que tem o seguinte url: myapplication.com/project/unique-project-id Quando o componente do projeto é carregado, aciono uma solicitação de dados para esse projeto a partir do evento componentDidMount. Agora estou tendo um problema em que, se eu alternar …

97 reactjs  react-router 

Além da capacidade de definir um "activeClassName" e "activeStyle" no NavLink, há alguma razão para usar o NavLink sobre o link ao criar links para outras rotas em elementos não navegacionais (ou seja, não nav principal no cabeçalho ou rodapé) em seu site que não precisa de um estado / …

97 reactjs  react-router  react-router-v4 

Eu sou novo no ReactJs. Este é o meu código: var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); e compilá-lo com o webpack. Além disso, adicionei o componente principal aos meus …

96 reactjs  react-router 

Eu estou tentando sair Reagir-Router (v4) e estou tendo problemas começam fora do Nav ter um dos Link's Seja active. Se eu clicar em qualquer uma das Linktags, o material ativo começa a funcionar. No entanto, gostaria que o Home Linkficasse ativo assim que o aplicativo iniciar, pois é o …

91 javascript  reactjs  ecmascript-6  react-router 

Tenho tido alguns problemas com o roteador react (estou usando a versão ^ 4.0.0). este é meu 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>, …

91 javascript  json  reactjs  react-router 

Existe uma maneira de fazer o React Router abrir um link em uma nova guia? Eu tentei isso e não funcionou. <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> É possível modificá-lo adicionando algo semelhante onClick="foo"ao Link como o que eu tenho acima, mas haveria um erro de console. Obrigado.

89 reactjs  react-router