React多页站点登录、注册页仅显示导航，导航下方无内容渲染问题

现存的会导致页面无法匹配渲染的问题 #

• Switch组件嵌套结构错误：React Router v5的Switch只识别自己的直接子级Route/Redirect节点做路径匹配，现在你把<main>标签放在Switch内部，把所有Route节点嵌在main里，会导致Switch完全识别不到路由规则，根本触发不了组件渲染逻辑。
• 路由路径书写不符合匹配规则：
  • LogIn路由的path="./Pages/LogIn"是文件相对路径写法，不是浏览器路由能识别的绝对路径格式，永远匹配不到
  • SignUp路由写的path="/SignUp"，和导航栏里指向的/Pages/SignUp地址完全不匹配，自然无法渲染
• 导航跳转用了原生<a>标签，会触发浏览器整页刷新，打断单页应用的路由状态，哪怕结构对了也容易出现路由上下文异常。

具体修复步骤 #

1. 调整App.js结构：把<main>标签移到Switch外层，保留你原来的上边距样式，让Switch的直接子元素只放路由规则
2. 统一所有路由路径，和导航栏的跳转地址完全对齐，去掉路径里错误的./前缀
3. 把导航里的原生a标签替换为React Router提供的Link组件，避免整页刷新打断路由

修复后的App.js代码 #

import React from 'react';
import Navbar from './Components/Navbar';
import Home from './Components/Home';
import LogIn from './Pages/LogIn';
import SignUp from './Pages/SignUp';
import {BrowserRouter as Router, Switch, Route } from 'react-router-dom';

class App extends React.Component {
  render(){
    return(
      <Router>
        <div>
          <Navbar/>
          <main style ={{marginTop:'100px'}}>
            <Switch>
              <Route path="/" exact component={Home}/>
              <Route path="/Pages/LogIn" exact component={LogIn}/>
              <Route path="/Pages/SignUp" component={SignUp}/>
            </Switch>
          </main>
        </div>
      </Router>
    );
  };
}
export default App;

导航栏（Toolbar）调整参考 #

先引入Link组件，再替换原生跳转标签：

import { Link } from 'react-router-dom';
// 原导航项替换为：
<li><Link to="/Pages/LogIn">Log In</Link></li>
<li><Link to="/Pages/SignUp">Sign Up</Link></li>

调整完成后不需要修改LogIn、SignUp页面本身的代码，只要路由匹配正常，两个页面里写的<h1>标题内容就会自动渲染在导航栏下方。

内容的提问来源于stack exchange，提问作者Ioana Adiana