我尝试为我的React应用程序设置嵌套路由,如下:
/
-> 主页/about
-> 关于页面/protected
-> 受保护的默认页面/protected/page1
-> 受保护的第一页
在CodeSandbox中(https://codesandbox.io/s/react-router-nested-route-utqy7)使用React 16.8.1和React Router 4.3.1可以正常工作。
但是当我使用webpack-dev-server(3.7.1)进行相同的设置时,它只能到达/
,无法到达其他路由。
我的文件结构如下:
├── package.json
├── src
│ ├── index.jsx
│ └── index.html
├── webpack
│ ├── paths.js
│ ├── webpack.common.js
│ └── webpack.dev.js
└── webpack.config.js
paths.js
const path = require('path');
module.exports = {
outputPath: path.resolve(__dirname, '../', 'build'),
entryPath: path.resolve(__dirname, '../', 'src/index.jsx'),
templatePath: path.resolve(__dirname, '../', 'src/index.html'),
};
webpack.common.js
const webpack = require('webpack');
const convert = require('koa-connect');
const history = require('connect-history-api-fallback');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const commonPaths = require('./paths');
module.exports = {
entry: commonPaths.entryPath,
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
},
],
},
serve: {
add: app => {
app.use(convert(history()));
},
content: commonPaths.entryPath,
dev: {
publicPath: commonPaths.outputPath,
},
open: true,
},
resolve: {
modules: ['src', 'node_modules'],
extensions: ['*', '.js', '.jsx', '.css', '.scss'],
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({
template: commonPaths.templatePath,
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async',
}),
],
};
webpack.dev.js
const webpack = require('webpack');
const commonPaths = require('./paths');
module.exports = {
mode: 'development',
output: {
filename: '[name].js',
path: commonPaths.outputPath,
chunkFilename: '[name].js',
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader',
{
loader: 'css-loader',
},
'sass-loader',
],
},
],
},
devServer: {
contentBase: commonPaths.outputPath,
compress: true,
hot: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()],
};
webpack.config.js
const webpackMerge = require('webpack-merge');
const common = require('./webpack/webpack.common');
const devConfig = require(`./webpack/webpack.dev.js`);
module.exports = webpackMerge(common, devConfig);
index.jsx
import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";
const Homepage = () => (
<div>
<h1>Home Page</h1>
</div>
);
const AboutPage = () => (
<div>
<h1>About</h1>
</div>
);
const Protected = () => (
<div>
<h1>Protected default page</h1>
</div>
);
const ProtectedPage1 = () => (
<div>
<h1>ProtectedPage1</h1>
</div>
);
render(
<BrowserRouter>
<div>
<Route path="/" component={Homepage} exact />
<Route path="/about" component={AboutPage} />
<Route
path="/protected"
render={({ match: { url } }) => (
<div>
<Route path={`${url}/`} component={Protected} exact />
<Route path={`${url}/page1`} component={ProtectedPage1} />
</div>
)}
/>
</div>
</BrowserRouter>,
document.getElementById('app')
);
我认为我的配置中有一些路径不正确,但我就是想不出哪里错了。
文件名: 'main.js', 路径: path.resolve(__dirname, 'dist'), 公共路径: '/', },```
- elporfirio