本文介绍了反应-路由器交换机未按预期工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在学习REACTION,却被困在REACTION-ROUES

考虑以下事项:

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import HelloWorld from "./HelloWorld.jsx";

const Root = () => {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/" exact component={HelloWorld} />
          <Route component={NoMatch} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

function NoMatch({ location }) {
  return (
    <div>
      <h3>
        No match found
      </h3>
    </div>
  );
}

export default Root;

在‘/’此路线上,它按预期呈现HelloWorld组件,但在其他路线上(例如abc),它显示Cannot GET /abc而不是No match found

推荐答案

如果您使用create-react-app设置Reaction项目,则代码运行正常,但如果您使用webpack配置手动设置项目,则需要devServer: {historyApiFallback: true,}Reaction路由才能工作。

这篇关于反应-路由器交换机未按预期工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-17 21:52