React.js Route - previous page stays after redirection

Question

js and am using react-router-dom .

Say I have 2 files - 1. dashboard.js file

import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';

import WYSIWYG from './editor/wysiwyg';

export default class Dashboard extends Component{
    render(){
        return(
            <div className="wrapper">
                <Switch>
                    <Route exact path="/wysiwyg" component={WYSIWYG}/>
                </Switch>
                <ul id="DASHBOARD-MENU">
                    <li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
                </ul>     
            </div>
        );
    }
}

Note the ul with id="DASHBOARD-MENU" above

---

2nd - wysiwyg.js file

import React, { Component } from 'react';

export default class Wysiwyg extends Component{
    render(){
        return(
            <div id="WYSIWYG-CONTAINER">  
            </div>
        );
    }
}

Note the div with id="WYSIWYG-CONTAINER" in the above snippet

---

My problem is:

After redirection to WYSIWYG container from my dashboard , I can still see the - <ul id="DASHBOARD-MENU" .. rendered below the <div id="WYSIWYG-CONTAINER .. .

What I understood - is the component WYSIWYG is rendered replacing <Route declared in my dashboard.js file.

What I want:

I don't want the "DASHBOARD-MENU" element to render in my "WYSIWYG" page.

Is it possible?

Answer 1

The desired behavior can be obtained by considering both as different routes, and hence rendering only one of them depending on the path:

import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';

import WYSIWYG from './editor/wysiwyg';

const Dashboard = () => (
  <ul id="DASHBOARD-MENU">
    <li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
  </ul>
);

export default class Dashboard extends Component{
    render(){
        return(
            <div className="wrapper">
                <Switch>
                    <Route exact path="/" component={Dashboard} />
                    <Route exact path="/wysiwyg" component={WYSIWYG}/>
                </Switch>     
            </div>
        );
    }
}