嵌套路由链接不工作React Router

Question

我在ReactJS上建立了一个SPA网站。我正在尝试使用React Router v.5.2.0。我有一个名为ToDoList.js的示例应用程序，它应该位于下面的公文包页面上的URL。出于某种原因，它在我的本地主机上运行良好，但当我将它部署到Netlifly并托管在我的Github上时就不行了。当它住在这里的时候，它似乎不起作用。浏览器上的后退按钮似乎也不能正常工作。

Portfolio.js:

<Link to="/portfolio/todo-list">here</Link>

浏览器中的URL会更新为正确的URL，但不会加载组件。在我的App.js文件中，我有两种类型的路线，所以示例应用程序(todo列表(不会显示顶部导航。它工作

应用程序，js:

function App() {
return (
<BrowserRouter>
<div className="App">
<Switch>
<MainRoute exact path="/" component={Home} />
<MainRoute exact path="/about" component={About} />
<MainRoute exact path="/portfolio" component={Portfolio} />
<MainRoute exact path="/contact" component={Contact} />
<PortfolioRoute exact path="/portfolio/todo-list" component={ToDoList} />
</Switch>
</div>
</BrowserRouter>
);
}
export const MainRoute = ({ component: Component, ...rest}) => {
return(
<Route {...rest} component={(props) => (
<>
<TopNav />
<Container fluid>
<Row className="content-row">
<Component {...props} />
</Row>
</Container>
<Gradient />
</>
)} />
);
};
export const PortfolioRoute = ({ component: Component, ...rest}) => {
return(
<Route {...rest} component={(props) => (
<>
<Component {...props} />
</>
)} />
);
};
export default App;

Answer 1

/portfolio路由上的所有端点都需要在一个地方处理，否则ReactRouter无法处理嵌套，因为它首先选择Main。在这里查看文档的嵌套演示

---

此外，因此直接链接到https://www.aubreyhlaverty.com/portfolio/todo-list如果有效，您应该向Netlify_redirects文件添加一个200重定向，如下所示。可能也有助于解决您的其他问题。

/* /index.html 200