嵌套路由鏈接不起作用 React Router

Question

我在 ReactJS 上建立了我的網站作為 SPA。 我正在嘗試使用 React Router v.5.2.0。 我有一個名為 ToDoList.js 的示例應用程序，它應該位於以下投資組合頁面的 URL 中。 出於某種原因，它在我的本地主機上運行良好，但當我將它部署到 Netlifly 並托管在我的 Github 上時就不行了。 當它住在這里時，它似乎不起作用。 瀏覽器上的后退按鈕似乎也無法正常工作。

投資組合.js：

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

瀏覽器中的URL更新為右邊的URL，但不加載組件。 在我的 App.js 文件中，我有 2 種類型的路線，因此示例應用程序（待辦事項列表）不顯示頂部導航。 有用

應用程序，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有效，您應該將200重定向添加到您的 Netlify _redirects文件，如下所示。 也可能對您的其他問題有所幫助。

/* /index.html 200