React-router v4 - 无法获取 *url* [英] React-router v4 - cannot GET *url*

问题描述

我开始使用 react-router v4.我的 app.js 中有一个简单的 和一些导航链接(见下面的代码).如果我导航到 localhost/vocabulary，路由器会将我重定向到正确的页面.但是，当我之后按重新加载(F5)(localhost/vocabulary)时，所有内容都消失了，浏览器报告Cannot GET/vocabulary.这怎么可能?有人能给我任何解决方法的线索吗(正确重新加载页面)?

App.js:

从 'react' 导入 React从'react-dom' 导入 ReactDOMimport { BrowserRouter as Router, Route, Link } from 'react-router-dom'从反应路由器"导入 { 开关，重定向}从'./pages/Login'导入登录从'./pages/Vocabulary'导入词汇const appContainer = document.getElementById('app')ReactDOM.render(<路由器><div><ul><li><Link to="/">首页</Link></li><li><Link to="/vocabulary">Vocabulary</Link></li><开关><路由精确路径="/" component={Login}/><路由精确路径="/vocabulary" component={Vocabulary}/></开关>

</路由器>,应用容器)

解决方案

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

var path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin');模块.出口 = {条目:'./app/index.js',输出: {路径:path.resolve(__dirname, 'dist'),文件名:'index_bundle.js'，公共路径:'/'},模块: {规则: [{ 测试:/.(js)$/, 使用: 'babel-loader' },{ 测试:/.css$/, 使用: [ 'style-loader', 'css-loader' ]}]},开发服务器:{historyApiFallback: 真,},插件: [新的 HtmlWebpackPlugin({模板:'app/index.html'})]};

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

I started to use react-router v4. I have a simple <Router> in my app.js with some navigation links (see code below). If I navigate to localhost/vocabulary, router redirects me to the right page. However, when I press reload (F5) afterwards (localhost/vocabulary), all content disappear and browser report Cannot GET /vocabulary. How is that possible? Can somebody gives me any clue how to solve that (reload the page correctly)?

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)

解决方案

I'm assuming you're using Webpack. If so, adding a few things to your webpack config should solve the issue. Specifically, output.publicPath = '/' and devServer.historyApiFallback = true. Here's an example webpack config below which uses both of ^ and fixes the refresh issue for me. If you're curious "why", this will help.

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

I wrote more about this here - Fixing the "cannot GET /URL" error on refresh with React Router (or how client side routers work)

这篇关于React-router v4 - 无法获取 *url*的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！