更新“not”但不加载路径
提问于 2019-11-02 22:10:31
纳瓦尔路线不工作了。
我有一个navbar component，它充当菜单栏。此navbar component路由到About component。我还有一个Route.js，在这里我为应用程序的其余部分实现了路由。Route.js是我加载Navbar component的地方。
它正在更新URL，但不加载路径。
Navbar component
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;这个AppRouter加载在App.js中。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-02 23:04:44
我克隆了你的项目并运行了它。
更新的Navbar.js，(从AppBar中删除了封闭的路由器，从Navbar组件中删除了路由声明)
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>
<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='/about' className={classes.a}>
About
</Link>
</Toolbar>
</AppBar>
</Fragment>
);
}
export default Navbar;更新的src/Switch/index.js(在这里添加了关于路由的内容，并使用开关将路由封装起来)
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import TrelloBoard from "../components/TrelloBoard";
import Home from "../components/Home";
import Navbar from "../components/navbar/Navbar";
import About from "../components/pages/About";
const AppRouter = () => {
return (
<Router>
<div>
<Navbar></Navbar>
<Switch>
<Route path="/about" component={About} />
<Route path="/:boardID" component={TrelloBoard} />
<Route path="/" exact component={Home} />
</Switch>
</div>
</Router>
);
};
export default AppRouter;我认为上述的改变如你所期望的那样有效。
Stack Overflow用户
发布于 2019-11-02 22:27:16
<Link>组件需要一个参数to，它是路由器中定义<Route>的定义url。
在您的示例中，它的接缝就像您试图使用相对路径访问js文件一样，但这不是反应性路由器-dom的工作方式。
试着用：
<Link to='/about' className={classes.a}>并确保你的你的你有相同的路线定义：
<Switch>
<Route exact path="/" component={Home}>
<Route path="/about">
<About />
</Route>
</Switch>
<Switch>查看其所有子元素，并呈现路径与当前URL匹配的第一个元素。使用任意时间您有多个路由，但您希望每次只呈现其中一个路由。
您可以在反应性路由器基本文档上看到一个完整的工作示例，它运行这个沙盒。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58677832
复制相关文章
![[iOS] 列表滑动展开隐藏头部HeaderView](https://ask.qcloudimg.com/http-save/yehe-1450154/6roebufryz.gif)
点击加载更多
腾讯云开发者
