反应路由器-路由没有显示子菜单元素的内容
我开始有反应。
我正在尝试这个https://reactrouter.com/反应路由器在我的第一个应用程序。我的问题是，当我单击子菜单-1或子菜单-2时，没有显示 my contentE 210。/又名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')
);App.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 MainNavigationsubNavigation.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 SubNavigationContent1 (2相同)
import React from 'react';
const Content1= () => {
return (
<p>Habíbo habíbo</p>
)
}
export default Content1我已经重命名了所有函数的名称和结构中的链接，所以定位对其他人来说更容易。
回答 3
Stack Overflow用户
发布于 2020-07-14 21:00:34
您的导航<Link>链接到"/menu-1/content-1"，但路由器<Switch />检查"/menu-1/submenu-1"。
你应该用同样的名字。一个好的经验法则是总是使用内容，而不是输入两次相同的字符串。
如果你这样写的话，犯错误的可能性就小得多：
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>Stack Overflow用户
发布于 2020-07-14 21:02:15
我认为您必须将您的content1和content2重命名为Content1和Content2，因为React要求您以大写字母开头每个组件名称。
也是@XCS的答案
Stack Overflow用户
发布于 2020-07-14 21:17:37
交换机选择匹配的第一个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。
https://stackoverflow.com/questions/62903903
复制相似问题
腾讯云开发者
