鍍金池/ 問(wèn)答/HTML/ react-router-dom 配置路由后，http://localhost:

react-router-dom 配置路由后，http://localhost:8080/list 報(bào)404

1 問(wèn)題描述
react-router-dom 配置路由后，瀏覽器直接輸入http://localhost:8080/list 頁(yè)面提示Cannot GET /users。Console提示——:8080/users:1 GET http://localhost:8080/users 404 (Not Found)。
2 相關(guān)代碼
我的代碼路徑如下：
圖片描述

相關(guān)代碼如下
package.json：

{
  "name": "07-01",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-html-attrs": "^2.1.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "prop-types": "^15.6.0",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-mixin": "^2.0.2",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "dependencies": {
    "antd": "^3.0.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2"
  }
}

webpack.config.js：

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

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: './js/root.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: path.resolve(__dirname, "node_modules"),
        include: path.resolve(__dirname, "src"),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env','react'],
            plugins: ['react-html-attrs']
          }
        }
      },
      //下面使用ant-design 的配置文件
       {
        test: /\.css$/,
        use: [
          'style-loader', {
            loader: 'css-loader'
          }
        ]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, "src"),
    publicPath: "/src/",
    filename: 'bundle.js'
  }
};

index.js:

var React = require('react');
var ReactDom = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/bodyindex';
export default class Index extends React.Component {
  render() {
    var component = <ComponentHeader/>;
    return (<div>
      {component}
      <ComponentFooter/>
    </div>)
  }
}

root.js

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
import ComponentList from './components/list'
import {BrowserRouter, Route, Link} from 'react-router-dom';
import {Router, Switch} from 'react-router';

export default class Root extends React.Component {
  render() {
    return (
    <BrowserRouter>
        <Switch>
          <Route exact  path="/"  component={Index}/>
          <Route path="/list" component={ComponentList} />
        </Switch>
    </BrowserRouter>)
  };
}
ReactDOM.render(<Root/>, document.getElementById('examples'));

list.js

import React from 'react'
export default class ComponentList extends React.Component {
    render() {
        return(
          <div>我是鏈接</div>
        )
  }
}

index.html

<head>
  <link rel="stylesheet" href="./src/css/style.css" />
</head>
<div id="examples">123</div>
<script src="./src/bundle.js"></script>

3 報(bào)錯(cuò)信息
正常的： 圖片描述

圖片描述

報(bào)錯(cuò)的： 圖片描述
4 嘗試過(guò)辦法

嘗試了將root.js改成這個(gè)：但是沒(méi)有根本上解決我的問(wèn)題：

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
import ComponentList from './components/list'
import {BrowserRouter, Route, Link} from 'react-router-dom';
import {Router, Switch} from 'react-router';

export default class Root extends React.Component {
  render() {
    return (
    <BrowserRouter>
      <div>
          <Link to="/">Index</Link>
          <Link to = "/list" > ComponentList</Link>
        <Switch>
          <Route exact  path="/"  component={Index}/>
          <Route path="/list" component={ComponentList} />
        </Switch>
      </div>
    </BrowserRouter>)
  };
}
ReactDOM.render(<Root/>, document.getElementById('examples'));

圖片描述

回答
編輯回答
脾氣硬

webpack-dev-server 啟動(dòng)的時(shí)候加個(gè) --history-api-fallback 就行了。

webpack-dev-server --config webpack.config.js --history-api-fallback
2018年1月23日 15:44
編輯回答
落殤

因?yàn)槟愕暮蠖藳](méi)有 http://localhost:8080/list 這個(gè)路由 在地址欄直接鍵入地址是相當(dāng)于向后端發(fā)出一個(gè)get請(qǐng)求嘛， 后端只有 http://localhost:8080 這個(gè)對(duì)應(yīng)的就是你的單頁(yè)文件 index.html 其他的路由都是你前端寫(xiě)的。

2017年4月4日 00:42
編輯回答
野橘

直接輸入url跳轉(zhuǎn)，頁(yè)面會(huì)需要經(jīng)過(guò)后端請(qǐng)求，你這里沒(méi)有配置后端的路由，后端找不到這個(gè)鏈接，所以報(bào)404
解決方法：
1、使用webpack-dev-server
2、手動(dòng)搭建一個(gè)express的nodejs服務(wù)器
3、將browserRouter改成hashRouter
nodejs的路由配置可以去參考express的教程

2017年12月22日 23:34
編輯回答
扯機(jī)薄

看你用了react-router的switch,好奇就搜了下發(fā)現(xiàn)有人反饋這個(gè)問(wèn)題:http://blog.csdn.net/waterrin...

感覺(jué)跟你這個(gè) 可能是一個(gè)問(wèn)題建議你看下

另外我之前使用單頁(yè)面應(yīng)用在跳轉(zhuǎn)的時(shí)候用的外層都是Router里面是Route,感覺(jué)你這種用法好奇怪,
如果以上那個(gè)連接不能解決你的問(wèn)題,建議你回歸下react-router的基礎(chǔ)用法,不搞那么多花哨的,就簡(jiǎn)單的Router和Route跳轉(zhuǎn)調(diào)試下.

2017年1月12日 14:01
編輯回答
好難瘦

謝邀！
首先不建議您直接webpachk-dev-server --inline--hot這樣配置，命令方式不夠靈活，您更加體會(huì)不到webpachk-dev-server的魅力。
發(fā)生該問(wèn)題的原因是當(dāng)使用 BrowserRouter（HTML5 History API） 時(shí)，您并沒(méi)有重寫(xiě)路由。
解決辦法大致如下三種：
1、您可以將BrowserRouter更改成hashRouter，不過(guò)這樣鏈接會(huì)多一個(gè)#。
2、看您有引入webpack-dev-server，webpack-dev-server是一個(gè)小型的Node.js Express服務(wù)器，所以您可以直接用Express，Express配置如下，供參考：

clipboard.png
參考鏈接我的github項(xiàng)目：https://github.com/sosout/rea...

3、如果您非用webpack-dev-server不可，webpack-dev-server配置如下：

clipboard.png

我本地是引入的connect-history-api-fallback，您可以直接按照官方文檔，我這邊僅供參考：

clipboard.png

clipboard.png

clipboard.png

官方文檔鏈接：https://doc.webpack-china.org...

希望對(duì)您有所幫助！

2017年3月10日 23:26