im在尝试渲染多个页面时遇到麻烦。我是React中的新手，这就是为什么我经常浏览许多页面和教程。我正在使用React，Webpack，Babel和eslint airbnb
当我渲染我的应用程序时看起来像这样。
我用来渲染所有路线的页面应用程序就是这样。
import React from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import Homepage from './Homepage';
import Layout from '../components/Layout';
import NotFound from './NotFound';
// import NotFound from './NotFound';
function App() {
return (
<BrowserRouter>
<Layout>
<Switch>
<Route exact path='/' component={Homepage} />
<Route exact path='/homepage' component={Homepage} />
<Route path='/404' component={NotFound} />
<Redirect from='*' to='/404' />
</Switch>
</Layout>
</BrowserRouter>
);
}
export default App;
然后，当我进入路线/ homepage或类似这样的任何路线时
NotFound页面代码是这样的。
import React from 'react';
function NotFound() {
return <h1> Error 404: Not Found</h1>;
}
export default NotFound;
我的布局是这样的
import React from 'react';
import Header from './Header';
import Footer from './Footer';
function Layout(props) {
const { children } = props;
return (
<>
<Header />
{children}
<Footer />
</>
);
};
export default Layout;
我一直在寻找解决方案，也许是我正在使用但不确定的Webpack配置。我的webpack看起来像这样。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// para definir nuestra entrada index.js y la salida nuestro archivo bunble.js
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
// para resolver nuestros elementos
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
},
},
{
test: /\.(s*)css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
'css-loader',
'sass-loader',
],
},
{
test: /\.(png|gif|jpg)$/,
use: [
{
loader: 'file-loader',
options: { name: 'assets/[hash].[ext]' },
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
}),
new MiniCssExtractPlugin({
filename: 'assets/[name].css',
}),
],
};
我的package.json就是这样
{
"name": "legendary-deca-meca-app",
"version": "1.0.0",
"description": "Legendary app ",
"main": "index.js",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.1"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.3",
"eslint": "^7.2.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.20.0",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"start": "webpack-dev-server --open --mode development"
},
"repository": {
"type": "git",
"url": "git+https://github.com/RaPzoD1/legendary-deca-meca-app.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/RaPzoD1/legendary-deca-meca-app/issues"
},
"homepage": "https://github.com/RaPzoD1/legendary-deca-meca-app#readme"
}
感谢您的评论和时间。
无法发表评论。 ：）
您是否尝试过将“ /”路径移动到块的底部，就像这样：
<Switch>
<Route path='/homepage' component={Homepage} />
<Route path='/404' component={NotFound} />
<Route exact path='/' component={Homepage} />
<Redirect from='*' to='/404' />
</Switch>
您可以尝试如下使用链接和路由器。
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">HomePage</Link>
</li>
<li>
<Link to="/homepage">Homepage</Link>
</li>
<li>
<Link to="/404">NotFound</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/homepage">
<HomePage />
</Route>
<Route path="/404">
<NotFound />
</Route>
<Route path="/">
<HomePage />
</Route>
<Redirect from='*' to='/404' />
</Switch>
</div>
</Router>
您可以尝试使用“精确”属性
<Route path='/homepage' exact component={Homepage} />
谢谢您的帮助，我找到了答案。问题是react-router-dom，即时通讯使用“ react-router-dom”：“ ^ 5.2.0”，但是我看到的教程是react-router-dom版本4.3.1
我做了下一个更改
import React from 'react';
import { HashRouter as Router, BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'; ---> i import HashRouter as Router
import Homepage from './Homepage';
// import Layout from '../components/Layout';
import NotFound from './NotFound';
import Header from '../components/Header';
import Footer from '../components/Footer';
// import NotFound from './NotFound';
function App() {
return (
<Router> -----> here i change the BrowserRoter for Router
<Header /> --> here i erase the layout and i put teh <header> and <footer>
<Switch>
<Route exact path='/' component={Homepage} />
<Route exact path='/homepage' component={Homepage} />
<Route path='/404' component={NotFound} />
<Redirect from='*' to='/404' />
</Switch>
<Footer />
</Router>
);
}
export default App;