基于Material UI的React自定义导航栏路由异常问题求助

我帮你梳理下代码里的几个核心问题，以及对应的修复方案：

主要问题分析 #

• Router作用域错误：你只把Sign-in相关的路由代码放在<Router>内部，其他导航项和Sign-up都在路由上下文之外，这会导致react-router无法正确管理整个应用的路由状态，直接引发跳转异常。
• Link与Button的href冲突：同时使用<Link to>和Button的href属性会触发两种跳转机制（react-router的单页跳转 + 浏览器原生跳转），两种行为互相干扰导致点击异常。
• Route匹配逻辑不严谨：Switch下的Route没有添加exact属性，虽然当前路径不重叠，但后续扩展路由时很容易出现匹配错误。

修复后的代码示例 #

// 确保导入所需组件
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { Grid, Button } from '@mui/material';
import Signin from './Signin'; // 替换为你的Signin组件路径
import Signup from './Signup'; // 替换为你的Signup组件路径

const Navbar = () => {
  return (
    <Router> {/* 用Router包裹整个导航栏及路由内容 */}
      <Grid container direction="row" justify="space-evenly" alignItems="center">
        {/* 页面内锚点跳转，保留Button的href */}
        <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>

        {/* 路由跳转：用Link包裹Button，移除Button的href */}
        <Grid className="pt-4 navlink">
          <Link to="/signin" style={{ textDecoration: 'none' }}>
            <Button className="navlink">Sign-in</Button>
          </Link>
        </Grid>

        <Grid className="pt-4 navlink">
          <Link to="/signup" style={{ textDecoration: 'none' }}>
            <Button className="navlink">Sign-up</Button>
          </Link>
        </Grid>
      </Grid>

      {/* Switch放在Router内，添加exact确保精准匹配 */}
      <Switch>
        <Route exact path="/signin" component={Signin} />
        <Route exact path="/signup" component={Signup} />
      </Switch>
    </Router>
  );
};

export default Navbar;

额外优化建议 #

• 推荐使用Material UI Button的component属性直接绑定Link，写法更简洁且符合组件设计规范：

<Button 
  className="navlink"
  component={Link}
  to="/signin"
  style={{ textDecoration: 'none' }}
>
  Sign-in
</Button>

• 建议将Router提升到应用根组件（比如App.js）中，而不是放在导航栏组件内，这样整个应用的路由上下文会更清晰，所有需要路由的组件都能共享路由状态。

内容的提问来源于stack exchange，提问作者Ali Asad