代码之家 › 专栏 › 技术社区 › one-hand-octopus

为什么React路由器不能与<Switch>一起工作?

react-router reactjs javascript

one-hand-octopus · 技术社区 · 4 年前

Home.js

import React from 'react';
import About from '../pages/About';
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";

const Navbar = () => {

    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to="/">HOME</Link>
                        </li>
                        <li>
                            <Link to="/about-us">ABOUT US</Link>
                        </li>
                    </ul>
                </nav>
                <Switch>
                    <Route path="/about-us">
                        <About />
                    </Route>
                    <Route path="/">
                        <Home />
                    </Route>
                </Switch>
            </div>
        </Router>
    )
}

const Home = () => {
    return (
        <>
            <Navbar />
        </>
    )
}

export default Home;

然后在 index.js 提供 Home

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './pages/Home';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <Home />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

问题是, 无法在localhost:3000中呈现,终端显示 Compiled successfully! 但当加载localhost:3000时,它只是永远旋转,没有任何渲染。但是,如果删除它渲染的元素。文件夹结构设置如下:

src
--pages
----About.js
----Home.js
index.js

有人能帮忙吗?

1 回复 | 直到 4 年前

Chris 4 年前

您已经根据它的外观创建了一个无限循环。你的索引。js返回您的主组件,然后返回导航栏,导航栏有一个路由器,然后返回主组件,然后主组件一次又一次地重复该循环。

这是我将采用的方法,它将在about和home页面上显示导航栏,并且根据当前路线一次只显示其中一个页面。

// Navbar.js

const Navbar = () => {
    return (
        <nav>
            <ul>
                <li>
                    <Link to="/">HOME</Link>
                </li>
                <li>
                    <Link to="/about-us">ABOUT US</Link>
                </li>
            </ul>
        </nav>
    )
}

export default Navbar;

// Layout.js

import React from 'react';
import Navbar from './Navbar';
import About from '../pages/About';
import Home from '../pages/Home';
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";

const Layout = () => {
    return (
        <Router>
            <Navbar />

            <Switch>
                <Route path="/about-us">
                    <About />
                </Route>
                <Route path="/">
                    <Home />
                </Route>
            </Switch>
        </Router>
    )
}

export default Layout;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Layout from './components/Layout';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <Layout />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

src
--components
----Navbar.js
----Layout.js
--pages
----About.js
----Home.js
index.js