Mam dziwny problem. Nie zauważyłem kiedy przestał mi działać klik w linki z Route (<Link to="">). Otóż adres się zmienia ale komponent zostaje taki jaki był. Natomiast jeśli odświeżę stronę ze zmienionym adresem to załaduje się docelowy komponent (ten, który powinien).
Ktoś zna rozwiązanie?
app.js
import React from "react"; import ReactDOM from "react-dom"; import { Provider } from 'react-redux'; import { Router, Route } from 'react-router'; import createHistory from 'history/createBrowserHistory'; import axios from 'axios'; import App from './components/App/App'; import Tasks from './components/Tasks/Tasks'; import Projects from './components/Projects/Projects'; import store from './store'; const app = document.getElementById('app'); const history = new createHistory(); axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); ReactDOM.render( <Provider store={store}><Router history={history}><App><Route path="/app" exact component={Tasks} /><Route path="/app/projects" component={Projects} /></App></Router></Provider>, app);
i komponent App:
import React from 'react'; import { connect } from 'react-redux'; import Navbar from '../Navbar/Navbar'; import Sidebar from '../Sidebar/Sidebar'; import Flash from '../Flash/Flash'; import { getAllProjects } from '../../actions/projectsActions'; import { getAllTasks } from '../../actions/tasksActions'; @connect((store) => { return { projects: store.projects } }) export default class App extends React.Component { constructor(props) { super(props); this.props.dispatch(getAllProjects()); this.props.dispatch(getAllTasks()); } render() { return ( <div><Navbar /><Sidebar /><main className="app"> { this.props.children }</main><Flash /><div className="backdrop"></div></div> ) } }
Jeśli potrzeba więcej informacji to dopiszę jak będę wiedział co potrzeba.
Wszystkie pliki są dostępne na GitHubie - plik js w odpowiednim katalogu
Za wszelką pomoc z góry dziękuję.