在反应中，URL被更改，但视图未更改

Question

我搜索了类似的情况，但这不适合我。我需要你的帮助。

现在我的页面称为“ A”。

“ A”有两种更改URL的方法。 GNB，以及我命名为TypeSelector的组件。

通过类型选择器，它起作用。

并且GNB也只能从其他页面到“ A”。

但是在“ A”中，GNB确实更改了URL，但该组件未呈现。

我需要一些帮助...谢谢。

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 {BrowserRouter} from 'react-router-dom';
import {BrowserRouter as Route, Switch} from 'react-router-dom';

更改为

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

您已从BrowserRouter创建了路由的别名，该别名已覆盖react-router-dom的实际路由

您更改别名或直接使用BrowserRouter并带有别名。