Question

我正在尝试路由到新组件upload.js。我正在使用React和确切的方法来隐藏主页中的其他组件。当我单击Upload。它应该重定向到UploadFileComponent组件。发生了什么是UploadFileComponent正在加载和重叠与所有其他组件.add完全相同，但不起作用

//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

根据docs：

<Switch>对于分组<Route>s不是必需的，但是它可能非常有用。 <Switch>将遍历其所有子元素<Route>，并仅呈现与当前位置匹配的第一个元素。当多个路径的路径与相同的路径名称匹配，对路径之间的过渡进行动画处理以及确定何时没有路径与当前位置匹配时，这将很有帮助（这样您就可以呈现“ 404”组件）。

您需要添加一个<switch>your routes here</switch>才能渲染出一个组件。

注意::此外，在代码段中，所有路由都使用相同的path。您需要为每个组件更改path，否则对于每个路径，只有第一个组件将被渲染。

更新

假设您要在一条路线上显示多个组件，然后创建一个容器组件并将所有其他组件导入到该容器组件中，例如

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> 
            );
    }
}

Answer 2

您的链接和所有路线应在单个<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>
      );
    }
  }

即使我们与使用React Route

2 个答案: