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

【问题标题】：react-router-dom pages won't switch?react-router-dom 页面不会切换？
【发布时间】：2020-07-02 02:08:59
【问题描述】：

我正在使用 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 文件，但是当我单击网页中的链接时，页面没有切换可能是什么问题？

我查看了this problem，但还不能解决问题。

【问题讨论】：

如果您可以重新创建 codesandbox.io 中的组件，我很乐意看看。
浏览器中的 URL 有变化吗？如果是，问题出在路由器上，否则问题出在您的链接上。
@Jake 是的，网址发生了变化

标签： javascript reactjs routing react-router-dom

【解决方案1】：

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

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

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

【讨论】：