无需重新加载页面即可react-router更改网址

IT技术 reactjs react-router
2021-05-18 09:50:00

当我使用 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>
);
3个回答

没有解决办法。我们可以使用onClick脚本或Link.

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

React Router v4 - 重定向组件

react-router v4 推荐的方法是允许您的渲染方法捕获重定向。使用 state 或 props 来确定是否需要显示重定向组件。

  1. 首先，导入Redirectfromreact-router

    import { Redirect } from 'react-router';

  2. 定义点击处理程序

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

  3. 更改渲染方法，例如，

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

    return ( <button onClick={this.handleOnClick} type="button">Button</button> );
}

    • 示例代码：

      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

通常是由于某些错误，使用 DevTools (Shift+CTRL+I) 在 chrome 上运行 web。在控制台中启用保留日志（保留日志）并查看发生了什么，您可能会看到一些错误，解决它并且它应该可以在不刷新的情况下工作。

其它你可能感兴趣的问题
上一篇在表单控件中react引导程序只读输入 下一篇Auth0 回调 URL 不匹配