React路由器如何在不刷新页面的情况下更改URL

Question

当我使用react-router 0.13.3时，一切都很顺利：我可以改变url并且不需要重新加载就能进行转换。

现在，在react-router 2.0中，如果我手动更改url，我的应用程序会完全重新加载，而不是简单的重定向。如何解决这个问题？

我想使用这个：

<a href="/routename">link</a>

改为这个：

<Link to="/routename">link</Link>

在一些特殊情况下。

路由

import {Router, Route, IndexRoute} from "react-router";
import App from './components/App';
import FrontPage from './components/frontPage/FrontPage';
import User from './components/user/User';
module.exports = (
    <Router>
        <Route path="/" component={App}>
            <IndexRoute component={FrontPage}/>
            <Route path="/user/:userid" component={User}/>
        </Route>
    </Router>
);

- stkvtflw

---

代码？需要看看你在做什么，这样我们才能帮助。 - John Ruddell

为什么你想要使用<a>而不是<Link>? <Link>在编译后会变成一个<a>标签。 - QoP

我使用 CSS 框架，它利用内联 HTML 代码。我不能在那里使用 <Link>，因为它不会被编译成 <a>。 - stkvtflw

我认为你应该发布你的routes.js文件。 - QoP

@stkvtflw React Router 使用 Link 进行历史记录更新，而不是重新加载页面。您可以传递任何 HTML 代码，并在编译时将其扩展到锚标记上。Link 通过 {...props} 将任何其他属性传递给锚标记。 - John Ruddell

Answer 1

这个问题目前没有解决方案。我们可以选择使用onClick脚本或者Link。

https://github.com/reactjs/react-router/issues/3411

- stkvtflw

---

一个例子会很好。 - Winter

Answer 2

React Router v4 - 重定向组件

react-router v4 推荐的方式是允许你的渲染方法捕获重定向。使用状态或属性来确定是否需要显示重定向组件。

1. First, import the Redirect from react-router

   import { Redirect } from 'react-router';
   

2. Define the Click handler

   handleOnClick = () => {
       // some action...
       // then redirect
       this.setState({redirect: true});
   }
   

3. Change Render method like,

   render() {
       if (this.state.redirect) {
       return <Redirect push to="/yourpath" />;
       }
   
       return ( <button onClick={this.handleOnClick} type="button">Button</button> );
   }
   

   • Example code :

     import { Redirect } from 'react-router';
     
     export default class ConfirmationDialog extends Component{
         constructor(props)
         {
             super(props);
             this.state = {
                 redirect : false
             }
         }
     
         handleOnClick = () => {
             // some action...
             // then redirect
             this.setState({redirect: true});
         }
     
         render() {
              if (this.state.redirect) {
                   return <Redirect push to="/yourpath" />;
              }
     
               return (
                       //your code
                       <button onClick={this.handleOnClick} 
                              type="button">Button</button>
               );
     
         }
     }
     

参考文献 : https://reacttraining.com/react-router/web/api/Redirect

- shalitha senanayaka

Answer 3

通常情况下，这是由于某些错误引起的。使用DevTools（Shift+CTRL+I）在Chrome上运行网络。在控制台中启用“保留日志”（保持日志），查看发生了什么错误，解决它，然后不需要刷新即可正常工作。

- ChaosPredictor

Answer 4

React Router v6

navigate 方法现在有 replace 选项。

const navigate = useNavigate();

navigate(PATHNAME, { replace: true });

所需导入：

import { useNavigate } from "react-router-dom";

- Aviv Mor

---

这不是 replace: true 设计的使用方式。 它不能防止页面重新加载，只是在浏览历史中不添加步骤，替换当前 URL 而不添加它。 - Diego Betto

那么，有没有解决方案呢？ - moodboom