Reactjs 正在更新“URL”，但未加载路径

导航条路线不工作

我有一个

导航栏组件

，它充当菜单栏。此

导航栏组件

路由到

关于组件

。我还有一个

Route.js

，其中我为应用程序的其余部分实现了路由

Route.js

是我加载导航栏组件的地方

它正在更新

URL

，但没有加载路径

导航栏组件

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

import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';

import About from '../pages/About';

const useStyles = makeStyles({
    hr: {
        width: '0.5px',
        height: '25px',
        backgroundColor: '#fff',
        margin: '0px 10px',
    },
    a: {
        color: '#ffffff',
        cursor: 'pointer',
        textDecoration: 'none',
    },
});

const Navbar = () => {
    const classes = useStyles();
    return (
        <Fragment>
            <Router>
                <AppBar position="static" width='100%'>
                    <Toolbar>
                        <Typography variant="h6" >
                            <Link to='/' className={classes.a}> Todo List Application </Link>
                        </Typography>
                        <Divider orientation="vertical" className={classes.hr} />
                        <Link to='../pages/About.js' className={classes.a}>
                            About
                        </Link>
                    </Toolbar>
                </AppBar>
                <Route path="/about.js" component={About}>
                    <About />
                </Route>
            </Router>
        </Fragment>
    );
}

export default Navbar;

import React，{Fragment}来自“React”
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“../pages/About”导入关于；
const useStyles=makeStyles({
人力资源：{
宽度：“0.5px”，
高度：'25px'，
背景颜色：“#fff”，
边距：“0px 10px”，
},
a:{
颜色：“#ffffff”，
光标：“指针”，
text装饰：“无”，
},
});
常量导航栏=（）=>{
const classes=useStyles（）；
返回(
待办事项列表应用程序
关于
);
}
导出默认导航栏；

这个

AppRouter

被加载到

App.js

你的

组件需要一个参数

到
，它是路由器中定义
的定义url

在您的示例中，这就像您试图使用相对路径访问js文件，但这不是react router dom的工作方式

尝试替换为：

<Link to='/about' className={classes.a}>



并确保定义了相同的路线：

<Switch>
    <Route exact path="/" component={Home}>
    <Route path="/about">
        <About />
    </Route>
</Switch>


，它运行此操作。
您的
组件需要一个参数
到
，该参数是路由器中定义
的定义url

在您的示例中，这就像您试图使用相对路径访问js文件，但这不是react router dom的工作方式

尝试替换为：

<Link to='/about' className={classes.a}>



并确保定义了相同的路线：

<Switch>
    <Route exact path="/" component={Home}>
    <Route path="/about">
        <About />
    </Route>
</Switch>


，它运行此操作。
我克隆了您的项目并运行了它

更新了Navbar.js，（从AppBar中删除了路由器封装，并从Navbar组件中删除了路由声明）

import React，{Fragment}来自“React”
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“../pages/About”导入关于；
const useStyles=makeStyles({
人力资源：{
宽度：“0.5px”，
高度：'25px'，
背景颜色：“#fff”，
边距：“0px 10px”，
},
a:{
颜色：“#ffffff”，
光标：“指针”，
text装饰：“无”，
},
});
常量导航栏=（）=>{
const classes=useStyles（）；
返回(
待办事项列表应用程序
关于
);
}
导出默认导航栏；

更新了src/routes/index.js（在此处添加了about路由，并使用Switch将路由括起来）

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./components/TrelloBoard”导入TrelloBoard；
从“./组件/主目录”导入主目录；
从“./components/Navbar/Navbar”导入导航栏；
从“./components/page/About”导入关于；
常量批准器=（）=>{
返回(
);
};
导出默认批准程序；

我认为上面的更改工作正常。
我克隆了您的项目并运行了它

更新了Navbar.js，（从AppBar中删除了路由器封装，并从Navbar组件中删除了路由声明）

import React，{Fragment}来自“React”
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“../pages/About”导入关于；
const useStyles=makeStyles({
人力资源：{
宽度：“0.5px”，
高度：'25px'，
背景颜色：“#fff”，
边距：“0px 10px”，
},
a:{
颜色：“#ffffff”，
光标：“指针”，
text装饰：“无”，
},
});
常量导航栏=（）=>{
const classes=useStyles（）；
返回(
待办事项列表应用程序
关于
);
}
导出默认导航栏；

更新了src/routes/index.js（在此处添加了about路由，并使用Switch将路由括起来）

从“React”导入React；
导入{BrowserRouter作为路由器、路由、S