react-router-dom 页面不会切换？

Question

我正在使用 react-router-dom npm 包。

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>
  );
}

如您所见，我将 index.js 文件用作全局路由器，并且我在 Drawer.js

中拥有所有 Link 组件

我正在尝试显示 Home 和 AboutUs JS 文件，但是当我单击网页中的链接时，页面不切换可能是什么问题？

我查看了但无法解决问题。

Answer 1

尝试将 <Route path="/" component={Home} /> 更改为 <Route path="/" exact component={Home} />

可能发生的情况是第一个要匹配的路由是正在呈现的路由。 / 匹配以 / 开头的任何内容 - 所以所有路线。

或者，您可以将 <Route path="/" component={Home} /> 移到底部

react-router-dom 页面不会切换？

react-router-dom pages won't switch?

javascript

reactjs

routing

react-router-dom