React-router-dom 不起作用，只是渲染"/"

Question

im 有一些尝试渲染多个页面 en react. 我是 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;

然后当我去路线/主页或任何路线时看起来像这样

不渲染任何内容

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 配置，但我不确定。 我的网络包看起来像这样。

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',
}),
],
};

我的包.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"
}

感谢您的评论和时间。

Answer 1

还不能评论。 :)

您是否尝试过将"/"路由移动到块的底部，如下所示：

<Switch>
<Route path='/homepage' component={Homepage} />
<Route path='/404' component={NotFound} />
<Route exact path='/' component={Homepage} />
<Redirect from='*' to='/404' />
</Switch>

Answer 2

您可以尝试使用链路和路由器，如下所示。

<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>

Answer 3

你可以尝试使用"精确"属性

<Route path='/homepage' exact component={Homepage} />

Answer 4

伙计们感谢您的帮助，我找到了答案。 问题是 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;

这是截图 主页 未找到

Answer 5

将其添加到您的 webpack.config 中.js

module.exports={
...
devServer: {
historyApiFallback: true,
},
...
}