in react, url is changed but not the view

Question

I searched for similar situations, but it's not for me. I need your help.

now I have the Page called "A".

"A" has two ways to change the URL. GNB, and the component I named TypeSelector.

by typeselector, it works.

and the GNB also works only from the-other-pages to "A".

but in "A", GNB does change the URL but the component does not render.

I need some help... thank you.

PAGE A

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

import DateSelector from './DateSelector.js';
import TypeSelector from './TypeSelector.js';
import PlanningYear from './PlanningYear.js';
import PlanningMonth from './PlanningMonth.js';
import PlanningWeek from './PlanningWeek.js';
import PlanningDay from './PlanningDay';

import '../css/program.css';
class Program extends Component{
    constructor(props){
        super(props);
    };

    render(){
        return(
            <BrowserRouter>
                <section id="Program">
                    <article id="intro">
                        <div className="title">
                            <h2>title</h2>
                            <p>text</p>
                        </div>
                    </article>
                    <DateSelector/>
                    <TypeSelector/>
                    <Switch>
                        <Route exact={true} path ="/public/Program"><PlanningYear/></Route>
                        <Route path ="/public/Program/year"><PlanningYear/></Route>
                        <Route path ="/public/Program/month"><PlanningMonth/></Route>
                        <Route path ="/public/Program/week"><PlanningWeek/></Route>
                        <Route path ="/public/Program/day"><PlanningDay/></Route>
                    </Switch>
                </section>
            </BrowserRouter>
        );
    };
};
export default Program;

TypeSelector

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

import Icon from "./Icon.js";


class TypeSelector extends Component{
    constructor(props){
        super(props);
        this.selector = React.createRef();
    };

    componentDidMount(){
        var index = 0;
        var typeArr = ["year", "month", "week", "day"];
        for(let i=0; i<typeArr.length; i++){
            if(window.location.href.indexOf(typeArr[i])>=0){
                index = i;
                break;
            };
        };

        this.selector.current.childNodes.forEach(function(now, i, elem){
            elem[i].classList.remove("selected");
            if(i===index)now.classList.add("selected");

            elem[i].addEventListener("click", function(){
                for(let j=0; j<elem.length; j++){
                    elem[j].classList.remove("selected");
                };
                now.classList.add("selected");
            });
        });
    };

    render(){
        return(
            <article id="TypeSelector">
                <div className="selector clearfix">
                    <ul className="clearfix" ref={this.selector}>
                        <li><Link to="/public/Program/year">year</Link></li>
                        <li><Link to="/public/Program/month">month</Link></li>
                        <li><Link to="/public/Program/week">week</Link></li>
                        <li><Link to="/public/Program/day">day</Link></li>
                    </ul>
                    <ol className="super_download">
                        <li><Link to=""><span>dtd</span><Icon name="download"/></Link></li>
                        <li><Link to=""><Icon name="download"/></Link></li>
                        <li><Link to=""><Icon name="print"/></Link></li>
                    </ol>
                </div>
            </article>
        );
    };
};

export default TypeSelector;

Answer 1

Import only one BrowserRouter

instead of

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

change to

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

You have created alias of Route from BrowserRouter which is overriding actual Route of react-router-dom

Either you change your alias name or directly use BrowserRouter with alias.