в реакции, URL-адрес изменен, но не вид - PullRequest
Новая
       5

в реакции, URL-адрес изменен, но не вид

1 голос
/ 27 января 2020

Я искал похожие ситуации, но это не для меня. Мне нужна ваша помощь.

Теперь у меня есть страница с именем "A".

"A" имеет два способа изменить URL. GNB, и компонент I с именем TypeSelector.

от typeselector, он работает.

, и GNB также работает только с других страниц на "A".

но в «A» GNB изменяет URL, но компонент не отображает.

Мне нужна помощь ... спасибо.

СТРАНИЦА 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;

1 Ответ

0 голосов
/ 27 января 2020

Импортировать только один BrowserRouter

вместо 

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 с псевдонимом.

...