路由器不起作用。 localhost:3000 /,localhost:3000 /#/,localhost:3000 /#/ aa ==>主页中的所有移动。
index.js
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<div>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/aa" component={Main}/>
</Switch>
</div>
</BrowserRouter>,
document.getElementById('app')
);
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const lunaRocketModulesPath = path.resolve(__dirname, 'luna-rocket');
module.exports = {
entry: [
'@babel/polyfill',
path.join(__dirname,'src/app','app.js')
],
output: {
path: path.join(__dirname,'build'),
filename: 'index.bundle.js'
},
mode: process.env.NODE_ENV || 'development',
resolve: {
alias: {
},
extensions: [
'.js',
],
},
devServer: {
contentBase: path.join(__dirname,'src')
},
module: {
rules: [
{
// this is so that we can compile any React,
// ES6 and above into normal ES5 syntax
test: /\.(js)$/,
// we do not want anything from node_modules to be compiled
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(css|scss)$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
loaders: ['file-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname,'src','index.html')
}),
]
};
如何移动aa ???请帮我。 我不明白为什么路由器不工作。 和#中的url是react中的意思是什么?? 如果localhost:3000 / aa-> devServer在工作 如果localhost:3000 /#/ aa ==>主页
(第16号反应,babel7,wepack4)
答案 0 :(得分:0)
我在这里无法真正确定是错误的,但是请尝试删除路线周围的<Switch></Switch>
和<Route exact path="/aa" component={Main}/>
没有确切的信息,这也匹配第一条路线
答案 1 :(得分:0)
实际上,/#/aa
只是向/
路由,因为#
指定了“锚点”或页面上的位置,并允许您“跳转”或“滚动”到页面上的那个位置。
您的Main
将在localhost:3000 / aa可用