React使用useNavigate路由跳转出现空白页问题排查

问题场景 #

在模态框组件中实现Continue按钮表单，预期点击后跳转至guestPage.js对应页面，引入useNavigate、BrowserRouter、Route、Routes等React Router API后页面直接渲染为空白，已确认非路由相关代码无语法、逻辑错误。

相关代码 #

App.js #

import CreatePopBox from "./popbox";
import createGuestPage from "./guestPage";
import {BrowserRouter , Route} from "react-router-dom";
import {Routes} from "react-router"


function App() {
  return (
      <>
          <BrowserRouter>
              <Routes>
                  <Route path='/' >
                      <CreatePopBox/>
                  </Route>
                  <Route path='/guestPage'>
                      <createGuestPage/>
                  </Route>
              </Routes>

          </BrowserRouter>


      </>
  )
}

export default App;

guestPage.js #

import React from "react";

export default function createGuestPage(){
    return(
        <div>
            <h1>GuestPage</h1>
        </div>
    );
}

popBox.js #

import "./popbox.css";
import React, {useState} from "react";
import Modal from "./Modal";
import {Button} from "@mui/material";

export default function CreatePopBox(){

    const [isOpen, setIsOpen] = useState(false);


    return(
       <div className= "popBox">
           <Button variant="contained" color="success" size ="large" onClick=
               {()=>{setIsOpen(true)}}>
             Continued as Guest
           </Button>
           {isOpen && <Modal onClose={setIsOpen}/>}
       </div>

    );
}

modal.js #

import React from 'react';
import "./Modal.css";
import {Button} from "@mui/material";
import {useNavigate} from "react-router";

export default function Modal({onClose}){
    const navigate = useNavigate();
    const handleFormSubmit = (event)=>{
        event.preventDefault();
        navigate("/guestPage");
    };
    return (
        <form className="Guest" onSubmit={handleFormSubmit}>
            <h1>Go to NextPage</h1>
                <Button variant="contained"  size ="large" id="cancel"
                        onClick={()=>onClose(false)}>Cancel
                </Button>
                <Button variant="contained"  size ="large" type="submit">
                    Continue
                </Button>
        </form>
    )
}

问题原因与修复方案 #

白屏由三处React Router v6的使用错误直接导致，逐个修改即可恢复正常：

• 自定义组件命名违反JSX规则：React会将小写开头的标签识别为原生DOM元素，你定义、导入、在路由中使用的访客页组件createGuestPage为小写开头，解析时会直接抛出错误中断渲染。将组件函数名、导入别名、路由调用处统一改为大写开头的CreateGuestPage即可。
• Route组件写法不符合v6版本规范：React Router v6不再支持将路由渲染组件直接写在Route标签子节点位置，必须通过element属性传入要渲染的组件。同时Routes不要从react-router单独导入，所有web端路由相关API统一从react-router-dom引入，避免多版本依赖冲突。
  App.js修正后的核心代码：

  // 统一从react-router-dom导入所有路由API
  import { BrowserRouter, Route, Routes } from "react-router-dom";
  // 组件名大写开头
  import CreateGuestPage from "./guestPage";
  import CreatePopBox from "./popbox";
  
  function App() {
    return (
      <BrowserRouter>
        <Routes>
          {/* 通过element属性传入路由对应渲染的组件 */}
          <Route path='/' element={<CreatePopBox/>} />
          <Route path='/guestPage' element={<CreateGuestPage/>} />
        </Routes>
      </BrowserRouter>
    )
  }
  
  export default App;
  

• useNavigate导入路径错误：modal.js中useNavigate从react-router导入，同样改为从react-router-dom导入即可，避免hook调用上下文不匹配的报错。

修改完成后刷新页面即可正常渲染，点击模态框的Continue按钮也能正常跳转至访客页面。

内容的提问来源于stack exchange，提问作者Anee go