React JS react-router-dom 导致 404 [英] React JS react-router-dom results in 404

问题描述

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

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

import React, { Component } from 'react';导入'./style/App.css';从'./js/components/header'导入头文件；从'./js/components/menu'导入菜单；从'./js/components/menuTwo'导入MenuTwo；import { BrowserRouter as Router, Route, Switch, Link } from 'react-路由器-dom';类 App 扩展组件 {使成为() {返回 (<路由器><div><Header headerProp="maxwell's pizzeria"/><Route path="/" 精确组件={Menu}/><Route path="/menuTwo" 精确组件={MenuTwo}/>

</路由器>)}}导出默认应用程序；

我也不太熟悉的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');//现有代码 ....变量配置 = {//现有代码 ....模块 : {装载机:[{测试:/\.jsx?/,包括:APP_DIR，装载机:'巴别塔'}]}}module.exports = config;

解决方案

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

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

然后你可以尝试一些重写规则来指向你在.htaccess文件中的应用:

#Options All -Indexes选项 - 索引<文件 *.php>ForceType 应用程序/x-httpd-php5</文件># 开始我的应用程序网络应用程序<ifModule mod_rewrite.c>选项 +FollowSymLinks索引忽略 */*重写引擎开启RewriteBase/path/to/app/RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-d重写规则 (.*)/path/to/app/index.html</ifModule># 结束我的应用程序网络应用程序

编辑

当然还要在Router

上设置basename

I am fairly new to React and am trying to utilize the react router feature. I am displaying Static pages on a TV screen pointing to a certain URL.

When in my Dev environment everything is working fine. When I enter the correct path it points to the set component. When loading it onto my hosting server and testing on a Live URL pointing to the desired path results in a 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;

The webpack.config which I am also not very familiar with is as follows:

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;

解决方案

First check your homepage entry in the package.json.

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

then you may try some rewrite rule to point to your apps in the.htaccess file:

#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

EDIT

And of course set the basename on the Router

<Router basename='/path/to/app'>

这篇关于React JS react-router-dom 导致 404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！