Javascript 在react应用程序中使用react路由进行路由

我正在尝试为一个简单的react应用程序设置路由，react路由器似乎与交换机404页面中的给定路由不匹配

以下是路线代码：

import {
  BrowserRouter as Router,
  Route,
  Switch,
  HashRouter
} from "react-router-dom";

window.React = React;

render(
  <Router>
    <Switch>
      <HashRouter>
        <Route exact path="/" component={App} />

        <Route path="list-days" component={App} />

        <Route path="add-day" component={AddDayForm} />
        <Route component={Whoops404} />
      </HashRouter>
    </Switch>
  </Router>,
  document.getElementById("root")
);

import { Link } from "react-router-dom";
import { IoIosHome as Home } from "react-icons/io";
import { FaCalendarPlus } from "react-icons/fa";
import { FaTable } from "react-icons/fa";

export const Menu = () => (
  <nav className="Menu">
    <Link to="/" activeclassname="selected">
      <Home />
    </Link>
    <Link to="/add-day" activeclassname="selected">
      <FaCalendarPlus />
    </Link>
    <Link to="/list-days" activeclassname="selected">
      <FaTable />
    </Link>
  </nav>

导入{
BrowserRouter作为路由器，
路线,，
转换
哈希路由器
}从“反应路由器dom”；
window.React=反应；
渲染(
,
document.getElementById（“根”）
);

以下是这些路线的链接代码：

import {
  BrowserRouter as Router,
  Route,
  Switch,
  HashRouter
} from "react-router-dom";

window.React = React;

render(
  <Router>
    <Switch>
      <HashRouter>
        <Route exact path="/" component={App} />

        <Route path="list-days" component={App} />

        <Route path="add-day" component={AddDayForm} />
        <Route component={Whoops404} />
      </HashRouter>
    </Switch>
  </Router>,
  document.getElementById("root")
);

import { Link } from "react-router-dom";
import { IoIosHome as Home } from "react-icons/io";
import { FaCalendarPlus } from "react-icons/fa";
import { FaTable } from "react-icons/fa";

export const Menu = () => (
  <nav className="Menu">
    <Link to="/" activeclassname="selected">
      <Home />
    </Link>
    <Link to="/add-day" activeclassname="selected">
      <FaCalendarPlus />
    </Link>
    <Link to="/list-days" activeclassname="selected">
      <FaTable />
    </Link>
  </nav>

从“react router dom”导入{Link}；
从“反应图标/io”导入{IOOSHOME as Home}；
从“react icons/fa”导入{FaCalendarPlus}；
从“react icons/fa”导入{FaTable}；
导出常量菜单=（）=>(

---

当您单击除主页链接以外的任何内容时，将显示404页面。

您使用“链接”作为HTML结构，并且在导入时未从“react router dom”继承该结构； 根据react的文档，所有这些都随此导入语句提供

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  HashRouter
} from "react-router-dom";

---

将

/

添加到路线路径

---

问题是，您已将路线定义为

<Route path="list-days" component={App} />

您正在访问这些链接作为

<Link to="/list-days" activeclassname="selected"></Link>

您可以看到在通过链接访问时添加前斜杠的区别。只需在路由上添加前斜杠，如下所示：

<Route path="/list-days" component={App} />

这将解决问题

---

谢谢。

可能是因为您正在使用

试试这个：

return (
    <HashRouter>
        <Switch>
          <Route exact path="#/" component={App} />

          <Route path="#/list-days" component={App} />

          <Route path="#/add-day" component={AddDayForm} />
          <Route component={Whoops404} />
        <Switch>
    </HashRouter>
)

返回(
)

---

或者，为什么不直接切换到，这样您就不需要在url上使用这些哈希？

尝试删除HashRouter并编辑您的路由，使其与此类似

<Router>
  <Switch>
    <Route exact path="/" component={App} />
    <Route exact path="/list-days" component={App} />
    <Route exact path="/add-day" component={AddDayForm} />
    <Route exact path="*" component={Whoops404} />
  </Switch>
</Router>

我不明白您的意思，请您详细说明您在导入时忘记了“链接”，因为您使用的链接是HTML，我在菜单组件中导入了我使用的链接，很抱歉，我没有在菜单组件中包含导入语句。这似乎可行，但仍然与404组件匹配，这两个组件都显示在您的

Switc中h

必须包装

路由

组件。向上移动

HashRouter

。另外，是否有理由同时使用

浏览器路由器

和

HashRouter

？这似乎可行，但仍然匹配404组件，显示了两个组件，我如何处理？使用确切的键