时间戳

首页 > 解决方案 > 嵌套路由链接不起作用 React Router

reactjs - 嵌套路由链接不起作用 React Router

问题描述

我在 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;

标签： reactjsgithubreact-router-domnetlify

解决方案

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

此外，为了直接链接到https://www.aubreyhlaverty.com/portfolio/todo-list有效，您应该将200重定向添加到您的 Netlify_redirects文件，如下所示。也可能对您的其他问题有所帮助。

/* /index.html 200

推荐阅读