组件在react.js中基于物料UI构建的自定义导航栏中打开

Question

我已经使用material ui在react中创建了自定义导航栏，现在我正在使用react路由器dom进行路由，但当单击Link时，就会发生这种情况

​

​

​

​

我的代码如下：

    <Grid container direction="row" justify="space-evenly" alignItems="center">
    <Grid className="pt-4 navlink"><Button  className="navlink" href="#How">How It Works</Button></Grid>
    <Grid className="pt-4 navlink"><Button  className="navlink" href="#Contact">Contact-Us</Button></Grid>
    <Grid className="pt-4 navlink"><Button  className="navlink" href="#Home">Home</Button></Grid>
    <Router>
    <Link to="/signin"><Grid className="pt-4 navlink"><Button  className="navlink" href="/signin">Sign-in</Button></Grid></Link>
    <Switch>
        <Route component={Signin} path="/signin"/>
        <Route component={Signup} path="/signup"/>
    </Switch>
    </Router>
    <Grid className="pt-4 navlink"><Button  className="navlink" href="#">Sign-up</Button></Grid>
  </Grid>

Answer 1

这是因为你没有把其他的代码(我的意思是那些图片等等)在路由器内部。

您必须将它们放入路由器中，并为其设置一个值为"/“的路径

您的代码应如下所示：

 <Grid container direction="row" justify="space-evenly" alignItems="center">
    <Grid className="pt-4 navlink"><Button  className="navlink" href="#How">How It Works</Button></Grid>
    <Grid className="pt-4 navlink"><Button  className="navlink" href="#Contact">Contact-Us</Button></Grid>
    <Grid className="pt-4 navlink"><Button  className="navlink" href="#Home">Home</Button></Grid>
    <Router>
    <Link to="/signin"><Grid className="pt-4 navlink"><Button  className="navlink" href="/signin">Sign-in</Button></Grid></Link>
    <Switch>
        <Route component={Signin} path="/signin"/>
        <Route component={Signup} path="/signup"/>
        {/*----------------------------------------------------------------*/}
        {/* I added line below in to your code */}

        <Route path="/" exact component={HomePage} />

        {/* and you have to save all the other parts like those images, etc
           in the HomePage Component and render it in just '/' route.
         */}
        {/*----------------------------------------------------------------*/}
    </Switch>
    </Router>
    <Grid className="pt-4 navlink"><Button  className="navlink" href="#">Sign-up</Button></Grid>
  </Grid>