![js js](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了react-router-dom 页面不会切换?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 react-router-dom npm 包.
Index.js
从'react'导入React;从 'react-dom' 导入 ReactDOM;导入'./index.css';从'./pages/Home'导入首页;从./pages/Aboutus"导入关于我们;import * as serviceWorker from './serviceWorker';从 './providers/Auth' 导入 {AuthProvider};进口 {BrowserRouter 作为路由器,转变,路线,关联来自反应路由器dom"函数路由(){返回 (<路由器><div><开关><Route path="/" component={Home}/><Route path="/home" component={Home}/><Route path="/AboutUs" component={AboutUs}/></开关>
</路由器>);}ReactDOM.render(<Routing/>, document.getElementById('root'));serviceWorker.unregister();
Drawer.js
从'react'导入React;从 'clsx' 导入 clsx;从'@material-ui/core/styles'导入{makeStyles};从'@material-ui/core/Drawer' 导入抽屉;从 '@material-ui/icons/AccountCircleOutlined' 导入 AccountIcon;从@material-ui/core/List"导入列表;从'@material-ui/core/Divider' 导入分频器;从 '@material-ui/core/ListItem' 导入 ListItem;从 '@material-ui/core/ListItemIcon' 导入 ListItemIcon;从 '@material-ui/core/ListItemText' 导入 ListItemText;从'@material-ui/icons/ContactSupportOutlined'导入ContactIcon;从'../pages/Home'导入首页;从../pages/Aboutus"导入关于我们;进口 {BrowserRouter 作为路由器,转变,路线,关联来自反应路由器-dom";const useStyles = makeStyles({列表: {宽度:250,},完整列表:{宽度:'自动',},文本链接:{颜色:'继承',textDecoration: '继承',}});导出默认函数 TemporaryDrawer(props) {const anch = '左';const topNav = [['登录', <AccountIcon/>]];const buttomNav = [['Home', <ContactIcon/>, <Home/>,'/'],['关于我们', <ContactIcon/>, <AboutUs/>,'/关于我们']];const 类 = useStyles();const [state, setState] = React.useState({顶部:假,左:真的,底部:假,正确:错误,});const toggleDrawer = (anchor, open) =>事件 =>{if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {返回;}setState({ ...state, [anchor]: open });};const 列表 = 锚点 =>( (<Link className={classes.textLink} to={text[3] ||""}><ListItem button key={text[0]}><ListItemIcon>{text[1]}</ListItemIcon><ListItemText primary={text[0]}/></ListItem></链接>))}</列表><分隔符/><列表>{buttomNav.map((text, index) => (<Link className={classes.textLink} to={text[3]}><ListItem button key={text[0]}><ListItemIcon>{text[1]}</ListItemIcon><ListItemText primary={text[0]}/></ListItem></链接>))}</列表>
);返回 (<div><React.Fragment key={anch}><抽屉锚点={anch} open={props.anchor}>{列表(anch)}</抽屉></React.Fragment>
);}
Home.js
从'react'导入React;从'../logo.svg'导入标志;导入'../App.css';从'../components/Nav'导入导航;导出默认函数 Home() {返回 (<div className="应用程序"><导航/><header className="App-header"><img src={logo} className="App-logo" alt="logo"/><p>编辑 <code>src/App.js</code>并保存以重新加载.</p>
);}
AboutUs.js
从'react'导入React;导入'../App.css';从'../components/Nav'导入导航;导出默认函数 AboutUs() {返回 (<div className="应用程序"><导航/>一些东西
);}
如您所见,我将 index.js 文件用作全局路由器,并且在 Drawer.js 中拥有所有链接组件
我正在尝试显示 Home 和 AboutUs JS 文件,但是当我单击网页中的链接时,页面没有切换可能是什么问题?
我查看了这个问题但无法解决问题
解决方案
尝试将
更改为
可能发生的情况是第一个匹配的路由是正在渲染的路由./
匹配以 /
开头的任何内容 - 所以所有路由.
或者,您可以将 <Route path="/" component={Home}/>
移动到底部
I am using the react-router-dom npm package.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './pages/Home';
import AboutUs from './pages/Aboutus';
import * as serviceWorker from './serviceWorker';
import {AuthProvider} from './providers/Auth';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom"
function Routing() {
return (
<Router>
<div>
<Switch>
<Route path="/" component={Home} />
<Route path="/home" component={Home} />
<Route path="/AboutUs" component={AboutUs} />
</Switch>
</div>
</Router>
);
}
ReactDOM.render(<Routing />, document.getElementById('root'));
serviceWorker.unregister();
Drawer.js
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AccountIcon from '@material-ui/icons/AccountCircleOutlined';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import ContactIcon from '@material-ui/icons/ContactSupportOutlined';
import Home from '../pages/Home';
import AboutUs from '../pages/Aboutus';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
const useStyles = makeStyles({
list: {
width: 250,
},
fullList: {
width: 'auto',
},
textLink: {
color: 'inherit',
textDecoration: 'inherit',
}
});
export default function TemporaryDrawer(props) {
const anch = 'left';
const topNav = [['Login', <AccountIcon/>]];
const buttomNav = [['Home', <ContactIcon/>, <Home />,'/'],['About Us', <ContactIcon/>, <AboutUs />,'/AboutUs']];
const classes = useStyles();
const [state, setState] = React.useState({
top: false,
left: true,
bottom: false,
right: false,
});
const toggleDrawer = (anchor, open) => event => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setState({ ...state, [anchor]: open });
};
const list = anchor => (
<div
className={clsx(classes.list, {
[classes.fullList]: anchor === 'top' || anchor === 'bottom',
})}
role="presentation"
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<List>
{topNav.map((text, index) => (
<Link className={classes.textLink} to={text[3] || ""}>
<ListItem button key={text[0]}>
<ListItemIcon>{text[1]}</ListItemIcon>
<ListItemText primary={text[0]} />
</ListItem>
</Link>
))}
</List>
<Divider />
<List>
{buttomNav.map((text, index) => (
<Link className={classes.textLink} to={text[3]}>
<ListItem button key={text[0]}>
<ListItemIcon>{text[1]}</ListItemIcon>
<ListItemText primary={text[0]} />
</ListItem>
</Link>
))}
</List>
</div>
);
return (
<div>
<React.Fragment key={anch}>
<Drawer anchor={anch} open={props.anchor}>
{list(anch)}
</Drawer>
</React.Fragment>
</div>
);
}
Home.js
import React from 'react';
import logo from '../logo.svg';
import '../App.css';
import Nav from '../components/Nav';
export default function Home() {
return (
<div className="App">
<Nav />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
AboutUs.js
import React from 'react';
import '../App.css';
import Nav from '../components/Nav';
export default function AboutUs() {
return (
<div className="App">
<Nav />
Some stuff
</div>
);
}
As you can see I am using the index.js file as a global router and I have all of the Link components in the Drawer.js
I am trying to display the Home and AboutUs JS files but when I click the links from the web page the pages don't switch what could be the problem?
I viewed this problem but couldn't fix the problem yet.
解决方案
Try changing <Route path="/" component={Home} />
to <Route path="/" exact component={Home} />
What's probably happening is that the first route to match is the one that's being rendered. /
matches anything starting with /
- so all routes.
Alternatively, you could move <Route path="/" component={Home} />
to the bottom
这篇关于react-router-dom 页面不会切换?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!