• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React Router kliknięcie w link nie działa a odświeżenie z docelowym adresem tak

Object Storage Arubacloud
0 głosów
342 wizyt
pytanie zadane 25 kwietnia 2017 w JavaScript przez Rafał Morawiec Nowicjusz (200 p.)

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ę.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 326 wizyt
pytanie zadane 30 maja 2022 w JavaScript przez Zaqu93 Gaduła (4,850 p.)
0 głosów
0 odpowiedzi 45 wizyt
pytanie zadane 14 lutego w JavaScript przez JaaO Początkujący (490 p.)
+1 głos
0 odpowiedzi 114 wizyt

92,563 zapytań

141,413 odpowiedzi

319,590 komentarzy

61,948 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...