Домашняя страница перекрывается с другой страницей, даже если мы используем точное с использованием маршрута React

Question

Я пытаюсь перенаправить на новый компонент upload.js. Я использую реагирование и точное для скрытия другого компонента на домашней странице. Когда я нажимаю «Upload.it», перенаправление на компонент UploadFileComponent происходит.со всеми другими компонентами. добавлено точно, но не работает

//app.js

function Appp() {
     return (
         <div className="App">
                  <HeaderComponent></HeaderComponent>

                  <Router>
                    <Route exact path="/" component={HomeComponent}></Route>

                  </Router>
         </div>
        );
    }

// home.js (conatinerComponent)

class HomeComponet extends Component {

construct(props) { }
render() {
    return (

            <div className="App">                   

                <div className="container">
                    <div className="App-body">
                        <SideBarComponent></SideBarComponent>
                        <ArticleComponent></ArticleComponent>

                    </div>
                </div>

                <FooterComponent></FooterComponent>
            </div>
    )

  }
}

// header.js

class HeaderComponent extends Component {
    render() {
        return (
           <Router>
            <div className="header">
                <div className="container">
                    <div className="header-content">
                        <img src={logo} alt="logo"></img>
                        <div className="nav-links" >
                            <ul >
                                <li>Home</li>
                                <li>About</li>
                                <li>Services</li>
                                <li><NavLink activeClassName="active" to="/upload" >Upload</NavLink></li>
                                {/* <li><Link to="/upload">Upload</Link></li> */}
                            </ul>
                        </div>
                    </div> 
                </div>                   

            </div>                
            <Route path="/upload" exact component={UploadFileComponent} /> 
        </Router>

            );
    }
}

Answer 1

ваши ссылки и весь маршрут должны быть в одиночном <Router></Router>. Пожалуйста, не используйте его несколько раз. Можете ли вы попробовать это ...

   function Appp() {
    return (
      <Router>
        <div className="App">
          <HeaderComponent />
          <Route path="/" exact component={HeroImageComponent} />
          <div className="container">
            <div className="App-body">
              <Route exact path="/" component={SideBarComponent} />
              <Route path="/" exact component={ArticleComponent} />
              <Route path="/upload" exact component={UploadFileComponent} />
            </div>
          </div>
          <Route path="/" exact component={FooterComponent} />
        </div>
      </Router>
    );
  }

  class HeaderComponent extends Component {
    render() {
      return (
        <div className="header">
          <div className="container">
            <div className="header-content">
              <img src={logo} alt="logo" />
              <div className="nav-links">
                <ul>
                  <li>Home</li>
                  <li>About</li>
                  <li>Services</li>
                  <li>
                    <Link to="/upload">Upload</Link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }

Answer 2

Согласно документам :

<Switch> не требуется для группировки <Route>s, но может быть весьма полезным.<Switch> будет перебирать все свои дочерние элементы <Route> и отображать только первый, соответствующий текущему местоположению.Это помогает, когда пути нескольких маршрутов совпадают с одним и тем же именем пути, при анимации переходов между маршрутами и при определении, когда ни одно из маршрутов не соответствует текущему местоположению (чтобы можно было отобразить компонент «404»).

Вам необходимо добавить <switch>your routes here</switch> для точного отображения одного компонента.

Примечание :: Также в вашем фрагменте кода вы используете один и тот же path для всех маршрутов.Вам нужно изменить path для каждого компонента, иначе для каждого пути будет отображаться только первый компонент.

ОБНОВЛЕНИЕ

Предположим, у вас более 1компоненты для отображения на одном маршруте, затем создайте компонент контейнера и импортируйте все другие компоненты в этот компонент контейнера, например,

import React from 'react';
import HeroImageComponent from './HeroImageComponent';
import SideBarComponent from './SideBarComponent';
import ArticleComponent from './ArticleComponent';
import FooterComponent from './FooterComponent';

class ContainerComponent extends React.Component{
    render(){
        return(
            <div>
                <HeroImageComponent />
                <SideBarComponent />
                <ArticleComponent />
                <FooterComponent />
            </div>
        )
    }
}

export default ContainerComponent;

Тогда ваш маршрут будет

function App() {
    return (
        <div className="App">
                 <HeaderComponent></HeaderComponent> //This can be added to HomeComponent

                 <Router>
                   <Route exact path="/" component={HomeComponent}></Route>
                   <Route path="/upload" exact component={UploadFileComponent} /> 
                 </Router>
        </div>
       );
   }

Ваш компонент заголовкадолжно быть,

class HeaderComponent extends Component {
    render() {
        return (
          <Router>
            <div className="header">
                <div className="container">
                    <div className="header-content">
                        <img src={logo} alt="logo"></img>
                        <div className="nav-links" >
                            <ul >
                                <li>Home</li>
                                <li>About</li>
                                <li>Services</li>
                                <li><NavLink activeClassName="active" to="/upload" >Upload</NavLink></li>
                                {/* <li><Link to="/upload">Upload</Link></li> */}
                            </ul>
                        </div>
                    </div> 
                </div>                   
            </div>  
          </Router> 
            );
    }
}