React-router url在刷新或手动写入时不起作用

我正在使用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不需要向任何服务器询问任何事情。

我的整个路由器。

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);
});

当前回答

在后端使用Express.js，在前端使用React(没有React -create-app)和reach/router，正确的reach/router路由React组件会显示出来，当在地址栏中点击Enter时，菜单链接将被设置为活动样式，例如http://localhost:8050/pages。

请签出以下内容，或直接访问我的存储库https://github.com/nickjohngray/staticbackeditor。所有的代码都在那里。

网络包：

设置代理。这允许任何从端口3000 (React)调用服务器，包括当按下回车键时在地址栏中获取index.html或任何东西的调用。它还允许调用API路由来获取JSON数据。

比如await axios。Post ('/api/login'， {email, pwd}):

devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/': 'http://localhost:8050',
    }
  }

设置Express.js路由

app.get('*', (req, res) => {
    console.log('sending index.html')
    res.sendFile(path.resolve('dist', 'index.html'))

});

这将匹配React的任何请求。它只返回dist文件夹中的index.html页面。当然，这个页面有一个更单页的React应用程序。(注意任何其他路由都应该出现在这个上面，在我的情况下，这些是我的API路由。)

反应路线

<Router>
    <Home path="/" />
    <Pages path="pages"/>
    <ErrorPage path="error"/>
    <Products path="products"/>
    <NotFound default />
</Router>

这些路由是在我的布局组件中定义的，当路径匹配时，该组件将加载相应的组件。

React布局构造函数

constructor(props) {
    super(props);

    this.props.changeURL({URL: globalHistory.location.pathname});
}

Layout构造函数在加载时立即被调用。在这里，我调用我的redux操作changeURL，我的菜单监听，所以它可以突出显示正确的菜单项，如下所示:

菜单的代码

<nav>
    {this.state.links.map( (link) =>
    <Link className={this.getActiveLinkClassName(link.path) } to={link.path}>
      {link.name}
    </Link>)}
</nav>

2020-08-08 14:17:35

其他回答

如果你使用Apache作为你的web服务器，你可以在你的。htaccess文件中插入这个:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

我正在使用react:“^16.12.0”和react-router:“^5.1.2” 这种方法是万能的，可能是最简单的入门方法。

2016-11-14 15:10:58

我使用React.js + Webpack模式。我在package中添加了——history-api-fallback参数。json文件。此时页面刷新工作正常。

每次我修改代码时，网页都会自动刷新。

"scripts": {
  "start": "rimraf build && cross-env NODE_ENV='development' webpack --mode development && cross-env NODE_ENV=development webpack-dev-server --history-api-fallback",
  ...
}

2020-08-12 21:51:16

Webpack开发服务器有一个选项可以启用此功能。打开包。Json和添加——history-api-fallback。这个解决方案对我很有效。

react-router-tutorial

2016-09-09 23:18:32

刷新DOM组件后无法得到403错误，这很简单。

只需在Webpack配置中添加这一行，'historyApiFallback: true '。这帮了我一整天的忙。

2018-01-02 12:53:24

如果您正在使用“create-react-app”命令，

生成一个React应用程序，然后生成包。json文件需要有一个更改，以在浏览器中正常运行的产品构建React SPA。打开文件包。Json，并添加以下代码段，

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

这里最重要的部分是“——history- API -fallback”，用于启用历史API回调。

如果使用Spring或任何其他后端API，有时会出现404错误。因此，在这种情况下，您需要在后端有一个控制器，将任何请求(您想要的)转发给index.html文件，由react-router处理。下面演示了一个使用Spring编写的示例控制器。

@Controller
public class ForwardingController {
    @RequestMapping("/<any end point name>/{path:[^\\.]+}/**")
    public String forward(HttpServletRequest httpServletRequest) {
        return "forward:/";
    }
}

例如，如果我们取一个后端API REST端点为“abc”(http://localhost:8080/abc/**)，任何到达该端点的请求都将重定向到React应用程序(index.html文件)，然后React -router将处理它。

2020-01-30 09:43:31

React-router url在刷新或手动写入时不起作用

推荐文章

最新文章

标签