在浏览器中输入网址时，路由无法在响应中起作用

Question

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

import { Router, Route } from 'react-router-dom';

class App extends React.Component {
    constructor(props) {
        super(props); 
    }

    render() {
        const { alert } = this.props;

        return (
            <Router history={history}>
                <div>                                  
                    <Route path="/login" component={LoginPage} />
                    <Route path="/administrate" component={AdministratePage} />     
                    <Route exact path='/' component={LoginPage} />   
                </div>
            </Router>
        );
    }
}

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

但是，当我在浏览器中输入http：// localhost：12345 / login或http：// localhost：12345 / administrate时，我得到的是404。

在导航器中输入“ http：// localhost：12345 / administrate ”会显示404，但如果我输入：

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

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

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

我的webpack.config.js：

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

index.js：

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

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

历史：

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;

Answer 1

无论 URL 是什么，您的服务器都需要交付您的应用程序，因为您的应用程序在浏览器中正在操纵该 URL。我们当前的服务器不知道如何处理 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>

配置您的服务器

你也可以在里面配置 Webpack 服务器 webpack.config.js

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

尝试HashRouter从 React Router Dom 使用

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



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

Answer 2

如此处所述，缺少将您的应用程序包装在index.js 中的BrowserRouter 下。

索引.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')
    ); 

一个完整的工作示例应该是这样的。

应用程序.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>

    );
  }
}