Question

我对React很新，我正在尝试使用反应路由器功能。我在电视屏幕上显示指向某个URL的静态页面。

在我的Dev环境中，一切正常。当我输入正确的路径时，它指向设置组件。将其加载到我的托管服务器上并在指向所需路径的实时URL上进行测试时会生成404。

import React, { Component } from 'react';
import './style/App.css';
import Header from './js/components/header';
import Menu from './js/components/menu';
import MenuTwo from './js/components/menuTwo';
import {  BrowserRouter as Router,  Route, Switch, Link } from 'react-
router-dom';

class App extends Component {
  render() {
   return (
     <Router>
  <div>
      <Header headerProp="maxwell's pizzeria" /> 
      <Route path="/" exact component={Menu} />
      <Route path="/menuTwo" exact component={MenuTwo} />

  </div>

  </Router>
  )
 }
}

export default App;

我不太熟悉的webpack.config如下：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src/build');

// Existing Code ....
var config = {
 // Existing Code ....
 module : {
  loaders : [
   {
    test : /\.jsx?/,
    include : APP_DIR,
    loader : 'babel'
  }
  ]
 }
}

module.exports = config;

Answer 1

首先检查homepage中的package.json条目。

"homepage": "http://example.com/path/to/app",

然后您可以尝试使用某些重写规则指向.htaccess文件中的应用：

#Options All -Indexes
Options -Indexes
<Files *.php>
    ForceType application/x-httpd-php5
</Files>
# BEGIN My App Web-App
<ifModule mod_rewrite.c>
  Options +FollowSymLinks
  IndexIgnore */*
  RewriteEngine On
  RewriteBase /path/to/app/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule (.*) /path/to/app/index.html
</ifModule>
# END   My App Web-App

修改

当然，在basename
上设置Router
<Router basename='/path/to/app'>

React JS react-router-dom导致404

1 个答案: