在 React 路由器中使用“链接到”时如何刷新页面？

Posted 2023-03-05

【中文标题】在 React 路由器中使用“链接到”时如何刷新页面？

【英文标题】：How to refresh the page when using a "Link to" in React router?

【发布时间】：2021-12-13 01:13:32

【问题描述】：

反应有点新，我正在尝试制作一个简单的线性页面流。在登录组件中单击链接时，我希望它转到选择页面而不显示上一页。在当前状态下，该链接只是添加了“选择”页面而不刷新任何内容。

应用代码：

import Login from "./pages/Login";
import Select from "./pages/Select";
import  createBrowserHistory  from 'history'
//import React from "react";
import 
    BrowserRouter as Router,
    Switch,
    Route,
    Link
 from "react-router-dom";

const history = createBrowserHistory()

function App() 
    return (
        <div className="fnb">
            <Router>
                <Switch>
                    <Route exact path="/" component=Login />
                    <Route exact path="/select" component=Select />
                </Switch>
            </Router>
        </div>
    );


export default App;

登录代码：

import React from "react";
import 
    BrowserRouter as Router,
    Switch,
    Route,
    Link
 from "react-router-dom";
import Select from "./Select";

function Login() 
    return (
        <div>
            <p>
                this is the login
            </p>
            <Router>
                <Link to="/select" window.location.reload();>
                    go to select page
                </Link>

                <Switch>
                    <Route exact path="/select" component=Select/>
                </Switch>
            </Router>
        </div>
    );


export default Login;

选择代码：

import React from "react";

function Select() 
    return (
        <div>
            <header>
            <p>
                this is the select
            </p>
            </header>
        </div>
    );


export default Select;

【问题讨论】：

useHistory() 来自 react-router 如果您想使用 javascript 处理将很有帮助。 let h = useHistory(); h.push("/select")。这会将您发送到选择页面。或者，如果您只想刷新页面，请尝试使用 react 中的 useState。请参阅官方文档以更好地理解。

嗨。我不确定，但我猜你必须只在App.js 中定义一次Router 和Switch。然后你只需要使用Link 或NavLink 和关于刷新：这不是 React 的全部意义吗？

【参考方案1】：

https://***.com/a/49162423/10787450 这是答案。我认为应用程序组件中的确切参数是问题所在。 只需将其从 Route 中删除即可。

【讨论】：

添加其他问答的链接作为评论。

【参考方案2】：

你更改文件代码

应用代码。

//App code  
import React from 'react'
import  BrowserRouter as Router, Route  from 'react-router-dom'
import Login from './pages/Login'
import Select from './pages/Select'
const App = () => 
    return (
        <Router>
            <Route exact path='/' component=Login />
            <Route path='/select' component=Select />
        </Router>
    )


export default App

//Login code
import React from 'react'
import  Link  from 'react-router-dom'
const Login = () => 
    return (
        <div>
            <p>this is the login</p>
            <Link to='/select'>go to select page</Link>
        </div>
    )

export default Login

//select code.
import React from 'react'
const Select = () => 
    return (
        <div>
            <header>
                <p>this is the select</p>
            </header>
        </div>
    )


export default Select