Respostas:
Eu uso withRouter
para pegar o location
suporte. Quando o componente é atualizado devido a uma nova rota, verifico se o valor mudou:
@withRouter
class App extends React.Component {
static propTypes = {
location: React.PropTypes.object.isRequired
}
// ...
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
this.onRouteChanged();
}
}
onRouteChanged() {
console.log("ROUTE CHANGED");
}
// ...
render(){
return <Switch>
<Route path="/" exact component={HomePage} />
<Route path="/checkout" component={CheckoutPage} />
<Route path="/success" component={SuccessPage} />
// ...
<Route component={NotFound} />
</Switch>
}
}
Espero que ajude
withRouter
, mas estou recebendo erro You should not use <Route> or withRouter() outside a <Router>
. Não vejo nenhum <Router/>
componente no código acima. Então, como está funcionando?
<Switch>
componente está agindo como o roteador de fato. Somente a primeira <Route>
entrada a ter um caminho correspondente será renderizada. Não há necessidade de qualquer <Router/>
componente neste cenário
Para expandir o exposto, você precisará acessar o objeto de histórico. Se você estiver usando BrowserRouter
, poderá importar withRouter
e agrupar seu componente com um componente de ordem superior (HoC) para ter acesso via adereços às propriedades e funções do objeto de histórico.
import { withRouter } from 'react-router-dom';
const myComponent = ({ history }) => {
history.listen((location, action) => {
// location is an object like window.location
console.log(action, location.pathname, location.state)
});
return <div>...</div>;
};
export default withRouter(myComponent);
A única coisa a ter em mente é que, com o Router e a maioria das outras maneiras de acessar, history
parece poluir os objetos à medida que desestruturam o objeto nele.
withRoutes
a withRouter
.
Você deve usar o histórico v4 lib.
Exemplo de lá
history.listen((location, action) => {
console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
console.log(`The last navigation action was ${action}`)
})
history.push
isso dispara history.listen
. Consulte o exemplo Usando um URL base nos documentos da história v4 . Como esse history
é realmente um invólucro do history
objeto nativo de um navegador, ele não se comporta exatamente como o nativo.
const unlisten = history.listen(myListener); unlisten();
withRouter
, history.listen
E useEffect
(Reagir Hooks) funciona muito bem em conjunto:
import React, { useEffect } from 'react'
import { withRouter } from 'react-router-dom'
const Component = ({ history }) => {
useEffect(() => history.listen(() => {
// do something on route change
// for my example, close a drawer
}), [])
//...
}
export default withRouter(Component)
O retorno de chamada do ouvinte será acionado sempre que uma rota for alterada e o retorno de history.listen
for um manipulador de desligamento que funcione bem useEffect
.
v5.1 introduz o gancho útil useLocation
https://reacttraining.com/blog/react-router-v5-1/#uselocation
import { Switch, useLocation } from 'react-router-dom'
function usePageViews() {
let location = useLocation()
useEffect(
() => {
ga.send(['pageview', location.pathname])
},
[location]
)
}
function App() {
usePageViews()
return <Switch>{/* your routes here */}</Switch>
}
Com ganchos:
import { useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import { history as historyShape } from 'react-router-prop-types'
const DebugHistory = ({ history }) => {
useEffect(() => {
console.log('> Router', history.action, history.location])
}, [history.location.key])
return null
}
DebugHistory.propTypes = { history: historyShape }
export default withRouter(DebugHistory)
Importar e renderizar como <DebugHistory>
componente
import React, { useEffect } from 'react';
import { useLocation } from 'react-router';
function MyApp() {
const location = useLocation();
useEffect(() => {
console.log('route has been changed');
...your code
},[location.pathname]);
}
com ganchos
Com react Hooks, estou usando useEffect
const history = useHistory()
const queryString = require('query-string')
const parsed = queryString.parse(location.search)
const [search, setSearch] = useState(parsed.search ? parsed.search : '')
useEffect(() => {
const parsedSearch = parsed.search ? parsed.search : ''
if (parsedSearch !== search) {
// do some action! The route Changed!
}
}, [location.search])
Em alguns casos, você pode usar o render
atributo em vez de component
, desta maneira:
class App extends React.Component {
constructor (props) {
super(props);
}
onRouteChange (pageId) {
console.log(pageId);
}
render () {
return <Switch>
<Route path="/" exact render={(props) => {
this.onRouteChange('home');
return <HomePage {...props} />;
}} />
<Route path="/checkout" exact render={(props) => {
this.onRouteChange('checkout');
return <CheckoutPage {...props} />;
}} />
</Switch>
}
}
Observe que, se você alterar o estado no onRouteChange
método, isso poderá causar o erro 'Profundidade máxima de atualização excedida'.
Com o useEffect
gancho, é possível detectar alterações de rota sem adicionar um ouvinte.
import React, { useEffect } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import Main from './Main';
import Blog from './Blog';
const App = ({history}) => {
useEffect( () => {
// When route changes, history.location.pathname changes as well
// And the code will execute after this line
}, [history.location.pathname]);
return (<Switch>
<Route exact path = '/' component = {Main}/>
<Route exact path = '/blog' component = {Blog}/>
</Switch>);
}
export default withRouter(App);
Como acabei de lidar com esse problema, adicionarei minha solução como um complemento às outras respostas fornecidas.
O problema aqui é que useEffect
realmente não funciona como você gostaria, pois a chamada só é acionada após a primeira renderização, para que haja um atraso indesejado.
Se você usar algum gerente de estado como o redux, é provável que ocorra uma cintilação na tela por causa do estado remanescente na loja.
O que você realmente deseja é usar, useLayoutEffect
pois isso é acionado imediatamente.
Então, escrevi uma pequena função utilitária que coloquei no mesmo diretório do meu roteador:
export const callApis = (fn, path) => {
useLayoutEffect(() => {
fn();
}, [path]);
};
Que eu chamo de dentro do componente HOC assim:
callApis(() => getTopicById({topicId}), path);
path
é o suporte que é passado no match
objeto durante o uso withRouter
.
Eu realmente não sou a favor de ouvir / não ouvir manualmente na história. Isso é apenas imo.