react-router-dom 页面不会切换? [英] react-router-dom pages won't switch?

问题描述

我正在使用 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 页面不会切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！