Question

我在下面的课程中有以下路线：

this.props.history.push('/administrate');

对于http://localhost:12345/，登录组件正确显示。

但是，当我在浏览器http://localhost:12345/login或http://localhost:12345/administrate中输入内容时，我会收到404。

打字＆＃39; http://localhost:12345/administrate＆＃39;在导航器中给出了404，但如果我放了：

   module.exports = {
   devServer: {
        historyApiFallback: true
    },
        context: __dirname,
        entry: "./index.js",
        output: {
            path: __dirname + "/dist",
            filename: "bundle.js" // naam van de file die je genereert. die bundle.js include je in je cshtml. Wordt voortdurend geupdate als je programmeert
        },
        resolve: {
            extensions: ['.js', '.jsx']
        },

        watch: true, // dan hoef je niet telkens npm run webpack te draaien, je ziet dan in je cmd 'webpack is watching the files'
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['babel-preset-env', 'babel-preset-react'], // deze heb je met npm geinstalleerd
                            plugins: ["transform-object-rest-spread"] // voor het gebruik van de spread operator
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {             // Werkt niet
                    test: /\.jsx$/, loader: 'babel-loader', exclude: '/node_modules/'
                }
            ]
        }
    };

在Login组件的render方法中，它正确地重定向，显示了administrate组件。

为什么？我的F12控制台没有错误。非常感谢你。

我的webpack.config.js：

import { store } from './_helpers';
import { App } from './App';

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

index.js：

import { History } from './index'; // history 4.6.2
import { getConfirmation } from './DOMUtils';

export interface BrowserHistoryBuildOptions {
  basename?: string;
  forceRefresh?: boolean;
  getUserConfirmation?: typeof getConfirmation;
  keyLength?: number;
}

export default function createBrowserHistory(options?: BrowserHistoryBuildOptions): History;

历史：

javax.servlet-api-3.1.0.jar
javax.servlet.jar
javax.ws.rs-api-2.0.1.jar

Answer 1

在index.js中的BrowserRouter下包装您的应用程序缺少所述here。

index.js

 import { store } from './_helpers';
    import { App } from './App';
    import { BrowserRouter } from "react-router-dom";

    render(
        <Provider store={store}>
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </Provider>,
        document.getElementById('root')
    );

一个完全可行的例子应该是这样的。

App.js

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Login from '../../Components/Login/Login';
import Signup from '../../Components/Signup/Signup';
import classes from './Home.css';
import HomePage from '../HomePage/HomePage';


class Home extends Component {

    render() {
    return (
        <div className={classes.Container}>
          <Switch>
            <Route path="/" exact component={HomePage} />
            <Route path="/login" component={Login} />
            <Route path="/signup" component={Signup} />
          </Switch>
        </div>

    );
  }
}

Answer 2

您的服务器无论提供什么网址都需要提供您的应用，因为您的应用在浏览器中正在操作网址。我们当前的服务器不知道如何处理URL。

Webpack Dev Server可以选择启用此功能。打开 package.json并添加--history-api-fallback。

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

我们还需要在index.html中更改我们的绝对路径的相对路径，因为URL将位于深层路径，如果应用程序从深层路径开始，则无法找到文件。

<!-- index.html -->
<!-- index.css -> /index.css -->
<link rel="stylesheet" href="/index.css">

<!-- bundle.js -> /bundle.js -->
<script src="/bundle.js"></script>

Configuring Your Server

您还可以在webpack.config.js

中配置Webpack服务器

 devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true
  },

尝试使用React Router Dom中的HashRouter

import { HashRouter, Route } from "react-router-dom";



             <HashRouter>                          
                    <Route path="/login" component={LoginPage} />
                    <Route path="/administrate" component={AdministratePage} />     
                    <Route exact path='/' component={LoginPage} />  
             </HashRouter>

在浏览器中键入url时，路由无法做出反应

2 个答案: