Переключатель не работает, когда у меня есть вложенные маршруты - PullRequest
0 голосов
/ 11 марта 2020

У меня проблема с моими маршрутами в реакции ...

У меня есть этот компонент под названием, Principalrouter

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

import Landing from './views/landing'
import Layout from './views/platform_content_layout'


export default function PrincipalRouter() {

    return (
        <Router>
            <Switch>

                   <Route path="/dashboard" component={Layout} />

                <Route exact path="/email_send" component={EmailSend} />

        </Switch>
    </Router>
);

} Это компонент макета

import React, { memo } from 'react';
/* Import Styles */
import './platformStyle.scss'
/* Import Components */
import Sidebar from './ContentSidebar'
import Navbar from './ContentNavbar'
import Content from './ContentRoutes'
import { Link } from 'react-router-dom'
const Index = memo(() => {
    return (
        <div className='container-layout'>
            <Link className='sidebar-link' to='/dashboard/profile'>
                <div className="sidebar-circle">
                    <i class="fas fa-user-friends"></i>
                    <span>Profiles</span>
                </div>
            </Link>
            <Link className='sidebar-link' to='/dashboard/home'>
                <div className="sidebar-circle">
                    <i class="fas fa-user-friends"></i>
                    <span>home</span>
                </div>
            </Link>
            {/*  <Sidebar /> */}
            <div className="container-content">
                {/*  <Navbar /> */}
                <Content />
            </div>
        </div>
    );
});

export default Index;

И у меня есть и еще один второй вложенный маршрут, который по какой-то причине не работает должным образом. Это второй код (компонент)

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

/* Imported Components */
import Profile from '../layout_components/profile'
import Home from '../layout_components/home'
const Index = memo(() => {
    return (
        <div className="platform-content-container">
            <Router>
                <Switch>
                    <Route exact path="/dashboard/home" component={Home} />
                    <Route exact path="/dashboard/profile" component={Profile} />
                </Switch>
            </Router>
        </div>
    );
});

export default Index;

, когда я загружаю или перезагружаю маршрут "/ dashboard / home", он работает нормально, а когда я загружаю или перезагружаю маршрут "/ dashboard / profile", он работает хорошо для

, но когда я использую NavLink или селектор ссылок из Reaction-router-dom для перенаправления на эти компоненты, компоненты не будут отображаться

...