手动刷新或编写时，React-router网址不起作用（react主动刷新）

25-03-06 8

在这里，我们将给大家分享关于手动刷新或编写时，React-router网址不起作用的知识，让您更了解react主动刷新的本质，同时也会涉及到如何更有效地history.replace在ReactRou

在这里，我们将给大家分享关于手动刷新或编写时，React-router网址不起作用的知识，让您更了解react主动刷新的本质，同时也会涉及到如何更有效地history.replace在React Router dom v5.2中不起作用、javascript – 为什么React-router v4不起作用(更改网址但不提取内容)？、JavaScript 手动刷新或编写时，React-router网址不起作用、React Router v4路由不起作用的内容。

本文目录一览：

手动刷新或编写时，React-router网址不起作用（react主动刷新）
history.replace在React Router dom v5.2中不起作用
javascript – 为什么React-router v4不起作用(更改网址但不提取内容)？
JavaScript 手动刷新或编写时，React-router网址不起作用
React Router v4路由不起作用

手动刷新或编写时，React-router网址不起作用（react主动刷新）

我正在使用React-router，当我单击链接按钮时，它可以正常工作，但是当我刷新网页时，它不会加载我想要的内容。

例如，我进去了localhost/joblist，一切都很好，因为我按链接到达这里。但是，如果刷新网页，则会得到：

Cannot GET /joblist

默认情况下，它不是这样工作的。最初，我的URL为localhost/#/，localhost/#/joblist并且它们工作正常。但是我不喜欢这种URL，所以尝试删除它#，我写道：

Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body);});

这个问题不会发生localhost/，这个总是返回我想要的。

编辑： 这个程序是单页的，所以/joblist不需要向任何服务器询问任何内容。

EDIT2： 我的整个路由器。

var routes = (    <Route name="app" path="/" handler={App}>        <Route name="joblist" path="/joblist" handler={JobList}/>        <DefaultRoute handler={Dashboard}/>        <NotFoundRoute handler={NotFound}/>    </Route>);Router.run(routes, Router.HistoryLocation, function (Handler) {  React.render(<Handler/>, document.body);});

答案1

小编典典

查看有关已接受答案的评论以及此问题的一般性质（“不起作用”），我认为这可能是对此处涉及的问题进行一些一般性解释的好地方。因此，此答案旨在作为OP的特定用例的背景信息/阐述。请多多包涵。

服务器端与客户端

首先要了解的是，现在有2个地方可以解释URL，而在“过去”中，以前只有1个地方。过去，当生活很简单时，一些用户向http://example.com/about服务器发送了一个请求，服务器检查了URL的路径部分，确定该用户正在请求About页面，然后将该页面发回。

使用客户端路由（这是React-
Router提供的功能），事情就变得不那么简单了。首先，客户端尚未加载任何JS代码。因此，第一个请求将始终是服务器。然后将返回一个页面，其中包含加载React和React
Router等所需的脚本标签。仅在加载了这些脚本后，阶段2才会启动。在第2阶段中，例如，当用户单击“关于我们”导航链接时，URL 仅在本地
更改为http://example.com/about（由History
API实现），但未
向服务器发出请求 。相反，React
Router在客户端执行其操作，确定要渲染的React视图并进行渲染。假设您的About页面不需要进行任何REST调用，那么它已经完成了。您已从“首页”过渡到“关于我们”，而没有触发任何服务器请求。

因此，基本上，当您单击链接时，会运行一些Javascript来操纵地址栏中的URL， 而不会导致页面刷新 ，这又导致React Router
在客户端 执行页面转换。

但是现在考虑如果将URL复制粘贴到地址栏中并将其通过电子邮件发送给朋友，会发生什么情况。您的朋友尚未加载您的网站。换句话说，她仍处于 阶段1
。她的机器上还没有运行React Router。所以，她的浏览器将使 服务器的请求 来http://example.com/about。

这就是您麻烦的开始。到现在为止，您只需将静态HTML放置在服务器的webroot上就可以摆脱困境。但这会 在从服务器请求时404为所有其他URL
提供错误。这些相同的URL 在客户端 可以正常工作，因为那里的React Router正在为您进行路由，但是除非您使服务器理解它们，否则它们
在服务器端 将失败。 __

结合服务器端和客户端路由

如果希望http://example.com/aboutURL在服务器端和客户端上都可以使用，则需要在服务器端和客户端上为其设置路由。有道理吧？

这就是您开始选择的地方。解决方案的范围从完全绕过问题（通过返回引导HTML的包罗万象的路由）到完全同构的方法（服务器和客户端都运行相同的JS代码）。

。

完全绕开该问题：哈希历史记录

使用哈希历史记录而不是浏览器历史记录，“关于”页面的URL看起来像这样：
http://example.com/#/about
哈希（#）符号后面的部分不会发送到服务器。因此，服务器仅http://example.com/按预期方式看到并发送索引页。React-
Router将拾取#/about零件并显示正确的页面。

缺点：

“丑陋的” URL
使用这种方法无法进行服务器端渲染。就搜索引擎优化（SEO）而言，您的网站只有一个页面，几乎没有任何内容。

。

包罗万象

通过这种方法，您确实使用了浏览器历史记录，但是只是在发送/*到的服务器上设置了一个包罗万象index.html，有效地为您提供了与哈希历史记录相同的情况。但是，您确实拥有干净的URL，以后可以改进此方案而不必使所有用户的收藏夹均无效。

缺点：

设置更复杂
仍然没有好的SEO

。

杂种

在混合方法中，您可以通过为特定路由添加特定脚本来扩展包罗万象的方案。您可以制作一些简单的PHP脚本来返回包含内容的网站最重要页面，以便Googlebot至少可以看到页面上的内容。

缺点：

设置起来更加复杂
对于那些给予特殊待遇的路线，只有好的SEO
复制代码以在服务器和客户端上呈现内容

。

同构

如果我们使用Node JS作为我们的服务器，以便我们可以在两端运行 相同的 JS代码怎么办？现在，我们在单个react-
router配置中定义了所有路由，并且不需要重复渲染代码。可以这么说，这是“圣杯”。如果客户端发生了页面转换，服务器将发送与最终相同的标记。就SEO而言，此解决方案是最佳的。

缺点：

服务器必须（能够）运行JS。我已经尝试过Java icw Nashorn，但是它不适用于我。实际上，这主要意味着您必须使用基于Node JS的服务器。
许多棘手的环境问题（window在服务器端使用等）
陡峭的学习曲线

。

我应该使用哪个？

选择一个您可以摆脱的选择。就我个人而言，我认为综合起来很容易设置，所以这是我的最低要求。通过此设置，您可以随着时间的流逝改善情况。如果您已经使用Node
JS作为服务器平台，那么我肯定会研究制作同构应用程序。是的，一开始很难，但是一旦掌握了它，它实际上是解决问题的一种非常优雅的方法。

因此，对我而言，基本上，这就是决定性因素。如果我的服务器在Node
JS上运行，我将同构。否则，我会选择全包解决方案，并随着时间的推移和SEO要求对其进行扩展（混合解决方案）。

如果您想了解更多有关使用React进行同构（也称为“通用”）渲染的知识，那么有一些关于该主题的很好的教程：

通过同构应用程序应对未来
在ReactJS中创建同构应用程序的痛苦和喜悦
如何实现Node + React同构JavaScript及其重要性

另外，为使您入门，我建议您查看一些入门套件。选择一个与您选择的技术相匹配的技术（请记住，React只是MVC中的V，您需要更多的东西来构建完整的应用程序）。首先看一下Facebook本身发布的内容：

创建React应用

或从社区中选择许多。现在有一个不错的站点尝试对所有索引：

选择您完美的React入门项目

我从这些开始：

反应同构Starterkit
React Redux Universal热门示例

目前，我正在使用通用制作的自制版本，该版本受上述两个入门工具包的启发，但是现在它们已经过时了。

祝您一切顺利！

history.replace在React Router dom v5.2中不起作用

反应路由器protected override async Task ExecuteAsync(CancellationToken stoppingToken) { while (true) { MeasurementViewModel[] batch; try { batch = await _channel.Reader.ReadBatchAsync( 5,TimeSpan.FromMinutes(10),stoppingToken); } catch (OperationCanceledException) { return; } catch (ChannelClosedException) { break; } Console.WriteLine(String.Join(',',batch.Select(item => item.Value))); } await _channel.Reader.Completion; // Propagate possible failure }的{{1}}与您的应用程序状态不同，它是history.replace对象本身上的状态。很少需要使用它。

要在保持页面状态的同时更改应用程序状态，您需要standard cancellation behavior（适用于组件或其直接子级的状态）或useState（适用于整个应用程序或应用的重要子树）。

javascript – 为什么React-router v4不起作用(更改网址但不提取内容)？

我有服务器端React / Redux / Express应用程序.
React-router v4为使用Switch的服务器应用程序提供解决方案,我需要使用一些东西来改变我的NavBar组件的位置

应用

import React,{ Component } from 'react'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { Switch,Route,Redirect,Link} from 'react-router-dom'
import FirstPage from './FirstPage'
import Test from './Test'
import LoginPage from './login/LoginPage'
import NoMatch from '../components/NoMatch'
import NavBar from '../components/NavBar'

import * as loginActions from '../actions/login'

import 'bootstrap/dist/css/bootstrap.css';

class App extends Component {

  render(){
    return (
      irstPage/>)}/>
              irst" render={loginRedirect(irstPage/>)}/>
              irstetoProps = state => ({
    login: state.login,error: state.error,isLoading: state.isLoading,})

const mapdispatchToProps = dispatch => ({
    loginActions: bindActionCreators(loginActions,dispatch)
})

export default connect(
    mapStatetoProps,mapdispatchToProps
)(App)

需要改变
的NavBar

import React from 'react'
import { Link,NavLink } from 'react-router-dom'

import classnames from 'classnames'

const NavBar =()=> {
    return (


如果我从浏览器URL手动导航它的工作就好了,但如果我点击链接或NavLink网址更新但不是应用程序切换.当loginRedirect到/ login它没有出现并且需要刷新页面时我也遇到了问题(可能这两个是相关的).
如何解决这个问题？


最佳答案
我认为这里的问题是使用redux ..因为只要道具没有改变,它就会阻止重新渲染组件,


This is because connect() implements shouldComponentUpdate by default,assuming that your component will produce the same results given the same props and state.
The best solution to this is to make sure that your components are pure and pass any external state to them via props. This will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application.
If that’s not practical for whatever reason (for example,if you’re using a library that depends heavily on React context),you may pass the pure: false option to connect():

function mapStatetoProps(state) {
  return { todos: state.todos }
}

export default connect(mapStatetoProps,null,{
  pure: false
})(TodoApp)

这里有更多解释的链接：
react-redux troubleshooting section
react-router DOCS

JavaScript 手动刷新或编写时，React-router网址不起作用

我正在使用React-router，当我单击链接按钮时，它可以正常工作，但是当我刷新网页时，它不会加载我想要的内容。

例如，我进去了localhost/joblist，一切都很好，因为我按链接到达这里。但是，如果刷新网页，则会得到：

Cannot GET /joblist

默认情况下，它不是这样工作的。最初，我的URL为localhost/#/，localhost/#/joblist并且它们工作正常。但是我不喜欢这种URL，因此尝试删除它#，我写道：

Router.run(routes,Router.HistoryLocation,function (Handler) {
 React.render(<Handler/>,document.body);
});

这个问题不会发生localhost/，这个总是返回我想要的。

编辑： 这个程序是单页的，所以/joblist不需要向任何服务器询问任何内容。

EDIT2： 我的整个路由器。

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes,function (Handler) {
  React.render(<Handler/>,document.body);
});

React Router v4路由不起作用

我对React还是比较陌生，我正在尝试弄清楚如何使React路由器正常工作。我有一个超级简单的测试应用程序，看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';

import {BrowserRouter as Router,Route,Switch,IndexRoute,Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
    <Route path ="/" component = {Home} />
    <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)

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

当我运行该应用程序时，home组件加载没有任何麻烦，并且当我单击“ Click Me”链接时，URL更改为localhost /
about，但是什么也没有发生。如果单击刷新，则会显示“无法获取/关于”。显然我在做错事，但我一直无法弄清楚是什么。我也在使用Webpack。

今天的关于手动刷新或编写时，React-router网址不起作用和react主动刷新的分享已经结束，谢谢您的关注，如果想了解更多关于history.replace在React Router dom v5.2中不起作用、javascript – 为什么React-router v4不起作用(更改网址但不提取内容)？、JavaScript 手动刷新或编写时，React-router网址不起作用、React Router v4路由不起作用的相关知识，请在本站进行查询。

本文标签：