React.js URL更改，但视图不变
React.js URL更改，但视图不变
提问于 2022-04-18 05:03:22
我是React.js的新手。我使用的是React.js 18.0.0。我正在开发简单的登录应用程序。这是我在路由方面面临的问题。当我单击“忘记密码”时，URL本身就会发生变化，但是视图保持不变。我做错了什么。
我的浏览器结果：
我的index.js：
我的App.js：
下面是我添加链接的Login.js：
回答 4
Stack Overflow用户
发布于 2022-04-18 05:56:19
如果您使用的是react路由器-dom版本-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>
);
}Stack Overflow用户
发布于 2022-04-18 05:15:43
将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'));
}Stack Overflow用户
发布于 2022-06-13 18:37:39
在您的index.js文件中，将App组件包装成BrowserRouter，React.StrictMode将首先出现，我希望它能解决这个问题。如果您使用的是版本5，请升级到版本6并重新启动项目。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71907745
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号