极客观点
项目管理
HarmonyOS
1 问题描述
react-router-dom 配置路由后，浏览器直接输入http://localhost:8080/list 页面提示Cannot GET /users。Console提示——:8080/users:1 GET http://localhost:8080/users 404 (Not Found)。
2 相关代码
我的代码路径如下：
相关代码如下
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 报错信息
正常的：
报错的：
4 尝试过办法
尝试了将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>
<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'));
谢邀！
首先不建议您直接webpachk-dev-server --inline--hot这样配置，命令方式不够灵活，您更加体会不到webpachk-dev-server的魅力。
发生该问题的原因是
当使用 BrowserRouter（HTML5 History API） 时，您并没有重写路由。解决办法大致如下三种：
1、您可以将BrowserRouter更改成hashRouter，不过这样链接会多一个
#。2、看您有引入webpack-dev-server，
webpack-dev-server是一个小型的Node.js Express服务器，所以您可以直接用Express，Express配置如下，供参考：参考链接我的github项目：https://github.com/sosout/rea...
3、如果您非用webpack-dev-server不可，webpack-dev-server配置如下：
我本地是引入的connect-history-api-fallback，您可以直接按照官方文档，我这边仅供参考：
官方文档链接：https://doc.webpack-china.org...
希望对您有所帮助！