反應路由器 - 路由不顯示子菜單元素的內容
[英]React router - Route is not displaying content of submenu element
問題描述
我是 React 的初學者。
我正在我的第一個應用程序中嘗試這個https://reactrouter.com/反應路由器。 我的問題是，當我點擊submenu-1 或 submenu-2時，它不會顯示我的內容。 精確路徑上的/ aka home元素效果很好。
如果您發現一些錯誤，我也會接受有關代碼結構的建議。 這是我的第一個反應應用程序。 謝謝你。
我的代碼如下所示：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import {BrowserRouter} from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App/>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
應用程序.js
function App() {
return (
<div className="App">
<header>
<MainNavigation/>
</header>
<body>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/menu-1" component={SubNavigation}/>
<Route path="/menu-1/submenu-1" component={Content1}/>
<Route path="/menu-1/submenu-2" component={Content2}/>
</Switch>
</body>
</div>
);
}
導出默認應用程序；
mainNavigation.js
import React from 'react';
import {Link} from "react-router-dom";
const MainNavigation = () => {
return (
<div>
<nav className="navigation">
<Link to="/">Home</Link>
<Link to="/menu-1">Menu - 1</Link>
</nav>
</div>
)
}
export default MainNavigation
subNavigation.js
import React from 'react';
import {Link} from "react-router-dom";
const SubNavigation = () => {
return (
<div>
<nav className="navigation">
<Link to="/menu-1/submenu-1">Content 1</Link>
<Link to="/menu-1/submenu-2">Content 2</Link>
</nav>
</div>
)
}
export default SubNavigation
內容1（2個相同）
import React from 'react';
const Content1= () => {
return (
<p>Habíbo habíbo</p>
)
}
export default Content1
PS我已經重命名了結構中的所有功能和鏈接的名稱，因此對其他人來說更容易定位。
3 個解決方案
解決方案1
3 已采納 2020-07-14 21:00:34
您的導航<Link>鏈接到"/menu-1/content-1"但路由器<Switch />會檢查"/menu-1/submenu-1" 。
您應該使用相同的名稱。 一個好的經驗法則是始終使用 contants 而不是鍵入兩次相同的字符串。
如果你這樣寫，出錯的可能性會大大降低：
const Paths = {
Root: '/',
Menu: '/menu-1',
Content1: '/menu-1/content-1',
Content2: '/menu-1/content-2',
}
...
<Switch>
<Route exact path={Paths.Root} component={Home}/>
<Route path={Paths.Menu} component={SubNavigation}/>
<Route path={Paths.Content1} component={content1}/>
<Route path={Paths.Content2} component={content2}/>
</Switch>
...
<Link to={Paths.Content1}>Content 1</Link>
<Link to={Paths.Content2}>Content 2</Link>
...
這樣，您不僅可以避免輸入錯誤，而且還可以在輸入Paths. .
如果它仍然不起作用，可能是因為Switch在匹配的第一個路徑處停止，並且在您的情況下， /menu-1路徑將始終在/menu-1/content-1之前匹配。 您可以將exact的路徑添加到Paths.Menu或將更具體的路徑首先放在頂部。
重新排序
<Switch>
<Route exact path={Paths.Root} component={Home}/>
<Route path={Paths.content1} component={content1}/>
<Route path={Paths.content2} component={content2}/>
<Route path={Paths.Menu} component={SubNavigation}/>
</Switch>
或者
exact添加到Paths.Menu
<Switch>
<Route exact path={Paths.Root} component={Home}/>
<Route exact path={Paths.Menu} component={SubNavigation}/>
<Route path={Paths.content1} component={content1}/>
<Route path={Paths.content2} component={content2}/>
</Switch>
解決方案2
1 2020-07-14 21:02:15
我相信您必須將您的 content1 和 content2 重命名為 Content1 和 Content2 因為 React 要求您以大寫字母開頭每個組件名稱。
也是@XCS的答案
解決方案3
1 2020-07-14 21:17:37
Switch選擇第一個匹配的Route並且不讓其他Route出現。
如果我正確理解了意圖，您有四個路線並需要以下標記：
/ ->
<>
<MainNavigation />
<Home />
</>
/menu-1 ->
<>
<MainNavigation />
<SubNavigation />
</>
/menu-1/submenu-1 ->
<>
<MainNavigation />
<SubNavigation />
<Content1 />
</>
/menu-1/submenu-2 ->
<>
<MainNavigation />
<SubNavigation />
<Content2 />
</>
可以通過將整個SubNavigation和Contents放入一個組件來完成，該組件本身使用Switch來專門匹配路徑（並檢查/menu-1/submenu-1或/menu-1/submenu-2 ），或者您可以刪除App.js中的Switch 。
React Router 路由配置，支持在任何路由上顯示模態
[英]React Router route configuration that supports displaying a modal over any route
React-Router：以編程方式從根元素路由到路由
[英]React-Router: Programatically routing to a route from the root element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.