Nested React Router не обновляет макет - PullRequest
Новая
       26

Nested React Router не обновляет макет

0 голосов
/ 14 ноября 2018

Компонент приложения с корневыми маршрутами: 

import React, { Component } from 'react';
import './App.css';
import Routes from './routes';

class App extends Component {

    render() {
        return (
            <Routes/>
        );
    }
}

export default App;

Корневые маршруты: 

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Login from './scenes/Login/Login';
import Dashboard from './scenes/Dashboard/Dashboard';

const Routes = () => (
    <Router>
        <Switch>
        <Route exact path="/" component={Login} />
            <Route path="/dashboard" component={Dashboard} />
        </Switch>
    </Router>
);

export default Routes;

Вложенный компонент с вложенными маршрутами: 

import React, { Component } from 'react';
import logo from '../../logo.png';
import './Dashboard.css';
import Routes from './routes';
import { Link, withRouter } from 'react-router-dom';

class Dashboard extends Component {

    render() {        

        return (
            <div className="App">
                <div id="map" />
                <div className='sidebar'>
                    <img src={logo} className="App-logo" alt="logo" />
                    <Link to={{ pathname: `/dashboard/profile` }}>
                        <i class="icon blue fa fa-2x fa-user mr-3 float-right"></i>
                    </Link>
                    <Link to={{ pathname: `/dashboard/notifications` }}>
                        <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
                    </Link>
                    <Link to={{ pathname: `/dashboard/home` }}>
                        <i class="icon blue fa fa-2x fa-home mr-3 float-right"></i>
                    </Link>
                    <Routes />


                </div>
            </div>
        );
    }
}

export default Dashboard;

Вложенные маршруты: 

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Notifications from './scenes/Notifications/Notifications';
import Home from './scenes/Home/Home';
import Profile from './scenes/Profile/Profile';

const Routes = () => (
    <Router>
        <Switch>
            <Route path="/dashboard/home" component={Home} />
            <Route path="/dashboard/profile" component={Profile} />
            <Route path="/dashboard/notifications" component={Notifications} />
        </Switch>
    </Router>
);

export default Routes;

Так что проблема в том, что когда я щелкаю ссылку ex. (/dashboard/notifications), она изменяет URL-адрес в браузере, но не обновляет макет, но когда я обновляю страницу, она работает нормально, и видны соответствующие компоненты. Маршрут / и dashboard работают нормально.

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

используйте этот метод синтаксиса ссылок 

 <Link to='/dashboard/notifications'>
                    <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
                </Link>

вместо этого 

 <Link to={{ pathname: `/dashboard/notifications` }}>
                        <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
                    </Link>

, если он не работает, это может что-то с кэшированием в вашем браузере или некоторыми другими проблемами

0 голосов
/ 14 ноября 2018

Попробуйте использовать тэг NavLink вместо Link и BrowserRouter вместо Router, импортируйте его из "Reaction-router-dom"

...