Question

我也发布了类似的问题，我得到了答案， 但是当我划分组件 并合并它们时，路由会产生一些问题。

请帮助我找到解决方案并为此我分享我的git repo：

https://github.com/yashchks87/homepage.git

请按下注册按钮下载，看，我只想要注册页面的内容而不是主页....

请检查src文件夹并检查homepage.js，NavBar.js这两个文件有代码内幕路由器标签请检查一下。

NavBar.js

export default class NavBar extends Component {
  render(){
    return(
        <Router>
          <div>
            <nav className="navbar navbar-dark bg-dark">
              <Link to="/src/Doctor/">Sign Up</Link>
            </nav>
            <Switch>
              <Route path="/src/Doctor" component={Doctor}/>
            </Switch>
          </div>
        </Router>
    );
  }
}

Homepage.js

class HomePage extends Component {
  render(){
    var homeMessage = () => {
      return (<p>This is home page.</p>);
    }
    return(
      <div>
        <Router>
          <div>
              <NavBar />
              <Switch>
                <Route exact path="/" component={homeMessage}/>

              </Switch>
            </div>
          </Router>
      </div>
    );
  }
}

上一个问题，我得到了答案的链接：

React router page redirect not correctly?

Answer 1

您只需要Router at the top level而不是每个组件，从Router组件中移除Navbar并将Navbar渲染为默认路由，以获取路径参数。

class HomePage extends Component {
  render(){
    var homeMessage = () => {
      return (<p>This is home page.</p>);
    }
    return(
      <div>
        <Router>
          <div>
              <Route component={NavBar} />
              <Switch>
                <Route exact path="/" component={homeMessage}/>

              </Switch>
            </div>
          </Router>
      </div>
    );
  }
}

和NavBar

export default class NavBar extends Component {
  render(){
    return(
          <div>
            <nav className="navbar navbar-dark bg-dark">
              <Link to="/src/Doctor/">Sign Up</Link>
            </nav>
            <Switch>
              <Route path="/src/Doctor" component={Doctor}/>
            </Switch>
          </div>
    );
  }
}

据我所知，你不想在Navbar中渲染路由，而是在你的主页中。因此，您可以考虑在HomePage中配置路由，而不是在Navbar中配置

<Router>
     <div>
          <Route component={NavBar} />
          <Switch>
             <Route exact path="/" component={homeMessage}/>
             <Route path="/src/Doctor" component={Doctor}/>
          </Switch>
      </div>
</Router>

并且Navbar只有

 <div>
      <nav className="navbar navbar-dark bg-dark">
          <Link to="/src/Doctor/">Sign Up</Link>
      </nav>
 </div>

React路由器组件divison创建冗余打印？

1 个答案: