我是React的初学者。
我正在我的第一个APP中尝试使用此https://reactrouter.com/反应路由器。 我的问题是，当我点击子菜单中的子菜单-1或子菜单-2 时，它没有显示我的内容。 确切路径中的 / aka home 元素效果很好。
如果您看到一些错误，我也会接受有关代码结构的建议。这是我的第一个React应用。谢谢。
我的代码如下：
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 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
Content1（两个相同）
import React from 'react';
const Content1= () => {
return (
<p>Habíbo habíbo</p>
)
}
export default Content1
P.S。我已经重命名了结构中所有函数和链接的名称，因此其他人的定位更加容易。
答案 0 :(得分：3)
您的导航<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>
答案 1 :(得分：1)
我相信您必须将content1和content2重命名为Content1和Content2，因为React要求您使用大写字母开头每个组件名称。
也是@XCS的答案
答案 2 :(得分：1)
Switch选择匹配的第一个Route，并且不允许其他Route出现。
如果我正确理解了意图，则您有4条路线，并且需要以下标记：
/ ->
<>
<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或{ {1}}），也可以删除/menu-1/submenu-2中的Switch。