当前位置: 首页 > 面试题库 >

React-Router V4-无法获取* url *

郜俊健
2023-03-14
问题内容

我开始使用react-router
v4。<Router>我的app.js中有一个简单的导航链接(请参见下面的代码)。如果我导航到localhost/vocabulary,路由器会将我重定向到正确的页面。但是,当我在之后按重新加载(F5)(localhost/vocabulary)时,所有内容消失并且浏览器报告Cannot GET /vocabulary。那怎么可能?有人可以给我任何解决方法的提示(正确重新加载页面)吗?

App.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { Switch, Redirect } from 'react-router'
import Login from './pages/Login'
import Vocabulary from './pages/Vocabulary'

const appContainer = document.getElementById('app')

ReactDOM.render(
  <Router>
    <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/vocabulary">Vocabulary</Link></li>
        </ul>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/vocabulary" component={Vocabulary} />
        </Switch>
    </div>
  </Router>,
appContainer)

问题答案:

我假设您正在使用Webpack。如果是这样,请在您的webpack配置中添加一些内容即可解决该问题。具体来说,output.publicPath ='/'devServer.historyApiFallback = true。这是下面的示例Webpack配置,它同时使用^和为我解决刷新问题。如果您好奇“为什么”,这会有所帮助。

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

我在这里写了更多关于此的内容- 使用React Router(或客户端路由器的工作方式)修复刷新时出现的“无法获取/
URL”错误



 类似资料:
  • 我开始使用React-RouterV4。我的app.js中有一个简单的和一些导航链接(参见下面的代码)。如果导航到,router会将我重定向到右侧页面。但是,当我之后按reload(F5)()时,所有内容都会消失,浏览器报告。这怎么可能?有人能给我任何线索如何解决(重新加载正确的页面)? app.js:

  • 问题内容: 我愿意在我的应用程序中使用React- router,并且首先尝试在文档中给出的示例,该示例已在下面复制。现在,当我转到时,我按预期看到了“ App”,但是每隔一页,例如返回“ Cannot GET / inbox”。我在这里想念什么? 问题答案: 我认为问题在于您正在发出http资源请求: 但仅使用客户端路由。您是否也打算进行服务器端渲染?您可能需要将路由器位置更改为而不是(默认)。

  • 我们使用nextjs/reactjs作为FE,并且我们有一个server.js文件,它允许我们在上传映像,但是由于某种原因,每当我们运行服务器时,都会出现错误 下面是我们在server.js上的代码 这些是我们package.json中包含的脚本 希望得到一些答案和建议。这些代码在本地运行,没有任何问题

  • 我想将值从反应发送到节点。我正在使用fetch,但我没有得到。这是代码:反应代码: 节点代码: const express=要求(“express”) const cors=require('cors') 常量应用=快速() app.use(cors({源: '*' }) ) app.listen(8000,'localhost') 应用程序。post(“/”,(req,res)= }) 当我参观

  • 我已经在谷歌云功能中构建了API。当我试图直接获取API时,会出现CORS错误。虽然我添加了,但失败了。 来自“http://localhost:3000”的“https://xxxxxxxx.com”已被CORS策略阻止:对飞行前请求的响应未通过访问控制检查:请求的资源上没有“access-control-allog-origin”标头。如果一个不透明的响应满足您的需要,请将请求的模式设置为“n

  • 我正在使用react、webpack和babel。我无法从URL获取id参数。 我收到以下错误: -GEThttp://localhost:8080/edit/bundle.js404(未找到) -拒绝从http://localhost:8080/edit/bundle.js执行脚本,因为它的MIME类型(text/html)不可执行,并且启用了严格的MIME类型检查。 我的代码 我的URL 谢谢