Question

我正在尝试为简单的react应用程序设置路由，而react-router似乎与默认的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>

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

Answer 1

您将“链接”用作HTML结构，并且在导入时未从“ react-router-dom”继承该链接；每次看到此反应的文档都随该import语句一起提供。

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

Answer 2

将/添加到您的路线路径。

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

Answer 3

问题是，您已经定义了

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

您将以以下方式访问这些链接

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

您可以看到通过Link访问时添加了斜杠的区别。像这样在Route上加一个斜杠：

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

将解决问题。

谢谢。

Answer 4

可能是因为您使用的是hash router。

尝试一下：

'''
import DS_wasteGroup_cleanerDemo
reload (DS_wasteGroup_cleanerDemo)
DS_wasteGroup_cleanerDemo.gui()
'''

import re
import maya.cmds as cmds
import maya.mel as mel

if cmds.window("renameWin", exists =True):
    cmds.deleteUI("renameWin", window = True)

myWindow = cmds.window("renameWin",t='DS_wasteGroup_cleanerDemo',w=200, h=500, toolbox=True)
column = cmds.columnLayout(adj=True)

def gui():

    cmds.button( label="Build Examples", c = buildExamples)
    cmds.separator( w=200, h=3)
    cmds.button( label="Delete Waste Groups", c = deleteWasteGrp)
    cmds.separator( w=200, h=9)

    cmds.setParent('..')
    cmds.showWindow(myWindow)

def buildExamples(*args):

    cmds.group(n='exampleGroup1',world=True,empty=True)
    cmds.joint(n='demoJoint1')
    cmds.group(n='curve1',world=True,empty=True)
    cmds.parent('curve1','demoJoint1')

    cmds.joint(n='demoJoint2')
    cmds.parent('demoJoint2','exampleGroup1')
    cmds.group(n='curve2',world=True,empty=True)
    cmds.parent('curve2','demoJoint2')

    cmds.joint(n='demoJoint3')
    cmds.parent('demoJoint3','exampleGroup1')
    cmds.group(n='curve3',world=True,empty=True)
    cmds.parent('curve3','demoJoint3')

    cmds.joint(n='demoJoint4')
    cmds.parent('demoJoint4','exampleGroup1')
    cmds.group(n='curve4',world=True,empty=True)
    cmds.parent('curve4','demoJoint4')

    cmds.joint(n='demoJoint5')
    cmds.parent('demoJoint5','exampleGroup1')
    cmds.group(n='curve5',world=True,empty=True)
    cmds.parent('curve5','demoJoint5')


def deleteWasteGrp(*args):
    grpList = cmds.listRelatives('demoJoint*',p=True,f=True)
    for name in grpList:
        print(grpList)
        cmds.delete('curve*')

还是为什么不直接切换到browserRouter，这样您就不需要URL上的那些哈希？

Answer 5

尝试删除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>

在React应用程序中使用React路由进行路由

5 个答案: