React.js URL 更改但视图未更改

Question

我是 React.js 新手。我正在使用 React.js 18.0.0。我正在开发简单的登录应用程序。在这里我面临路由问题。当我单击“忘记密码”时，仅 URL 会发生变化，但视图保持不变。我做错了什么。

我的浏览器结果：

我的index.js：

我的App.js：

下面是我的 Login.js，我在其中添加了链接：

Answer 1

如果您使用的是react-router-dom version-6，那么您可以根据文档更改代码 https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md

在index.js文件中

import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  rootElement
);

在App.js文件中

import React, {useEffect} from 'react';
import { Routes,Route} from 'react-router-dom';

function App(){
return(
   <Routes>
      <Route  path="/" element={<Login/>}>
      <Route  path="/forgetPassword" element={<ForgetPassword/>}
   <Routes>
 );
}

Answer 2

在您的

index.js

文件中将 App 组件包装到 BrowserRouter 中，React.StrictMode 将首先出现，我希望它能解决问题。如果您使用的是react-router-dom版本5，请升级到版本6并重新启动您的项目。

Answer 3

将index.js更改为：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';



ReactDOM.render(<App />, document.getElementById("root"));

将 App.js 更改为

import React, {useEffect} from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter ,Routes,Route} from 'react-router-dom';

import ForgetPassword from '.........'
import Login from '.......' 


function App(){
return(
 <BrowserRouter>
   <Routes>
      <Route exact path="/" element={<Login/>} />
      <Route path="/forgetPassword" element={<ForgetPassword/>} />

   <Routes>


 </BrowserRouter>

 );

}

 export default App;



 if(document.getElementById('app')){

  ReactDOM.render(<App/>,document.getElementById('app'));

 }

Answer 4

在您的index.js 文件中，只需删除 标签即可。就我而言，它解决了问题。 index.js 的示例片段如下：

const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
        <BrowserRouter>
        <App />
        </BrowserRouter> 
    );

Answer 5

问题可能是您在 index.js 文件中以严格模式渲染。

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(< App />);