我开始使用React。
我正在尝试这个https://reactrouter.com/react路由器在我的第一个应用程序中。我的问题是，当我在子菜单-1或子菜单-2上点击时，不会显示我的内容。/(又名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
内容1(2相同(
import React from 'react';
const Content1= () => {
return (
<p>Habíbo habíbo</p>
)
}
export default Content1
p.S.我已经重命名了结构中所有函数和链接的名称，所以其他人更容易定位
导航<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>
我认为您必须将content1和content2重命名为content1和content2，因为React要求每个组件名称都以大写字母开头。
还有来自@XCS 的答案
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。