[英]Why wouldn't React Router work with <Switch>?
我正在學習 React 路由器,嘗試構建一個非常基本的應用程序,例如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();
問題是, Home
不會在 localhost:3000 中呈現,終端顯示Compiled successfully!
但是當加載 localhost:3000 時,它只會永遠旋轉而沒有任何渲染。 但是,如果我刪除它呈現的元素。 文件夾結構設置如下:
src
--pages
----About.js
----Home.js
index.js
任何人都可以幫忙嗎?
你已經為自己創造了一個無限循環。 你的 index.js 返回你的 Home 組件,然后返回 Navbar,它有一個路由器,然后返回 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.