Javascript 为什么我的路由器只加载默认路由?
我正在使用React路由器学习React应用程序中的页面导航 这是我的package.jsonJavascript 为什么我的路由器只加载默认路由?,javascript,reactjs,react-router,react-router-v4,react-router-dom,Javascript,Reactjs,React Router,React Router V4,React Router Dom,我正在使用React路由器学习React应用程序中的页面导航 这是我的package.json { "name": "tutorial", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --inline --content-base .", "test": "echo \"Error: no test sp
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --inline --content-base .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rahul Shivsharan",
"license": "ISC",
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.3.4",
"@babel/plugin-proposal-class-properties": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"http-server": "^0.11.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
}
}
这是我的App.js
import React from "react";
import {Link} from "react-router";
export default class App extends React.Component{
render(){
return <div>Hello, React Router !!</div>
}
}
我的问题是何时开始使用服务器
npm start
装载
在浏览器中加载
你好,反应路由器
当我这样做的时候
它表明,,
不能走动
同
它装载
无法获取/回购
为什么我不能加载默认路径以外的路径
请帮助我,无论我是否做错了什么,您需要启用,以便webpack dev服务器将为当前提供404 Not Found
响应的所有路由提供index.html
文件
webpack.config.js
module.exports = {
entry: "./index.js",
output: {
filename: "bundle.js",
publicPath: ""
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["@babel/react", "@babel/preset-env"],
plugins: ["@babel/proposal-class-properties"]
}
}
]
}
};
我能解决我的问题 我只需要在index.js中做一些更改,如下所示
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter,Route, Switch} from "react-router-dom";
import App from "./modules/App";
import Repos from "./modules/Repos";
import About from "./modules/About";
ReactDOM.render(
(<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route exact path="/repos" component={Repos} />
<Route exact path="/about" component={About} />
</Switch>
</BrowserRouter>), document.getElementById("app"));
"devServer": {
"historyApiFallback": true
}
就是这样,现在上面的例子起作用了
那么现在,
当我加载
我加载了App.js中返回的html
在
它加载的html以About.js等格式返回但这并不能解决我的问题,我仍然无法在url或/About和/Repos上呈现以About.js和Repos.js编写的html
module.exports = {
"entry" : "./index.js",
"output" : {
"filename" : "bundle.js",
"publicPath" : ""
},
"module" : {
"rules" : [{
"test" : /\.js$/,
"exclude" : /node_modules/,
"loader" : "babel-loader",
"query": {
"presets": ['@babel/react', '@babel/preset-env'],
"plugins": ['@babel/proposal-class-properties']
}
}]
}
}
npm start
module.exports = {
entry: "./index.js",
output: {
filename: "bundle.js",
publicPath: ""
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["@babel/react", "@babel/preset-env"],
plugins: ["@babel/proposal-class-properties"]
}
}
]
}
};
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter,Route, Switch} from "react-router-dom";
import App from "./modules/App";
import Repos from "./modules/Repos";
import About from "./modules/About";
ReactDOM.render(
(<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route exact path="/repos" component={Repos} />
<Route exact path="/about" component={About} />
</Switch>
</BrowserRouter>), document.getElementById("app"));
"devServer": {
"historyApiFallback": true
}