Question

我在ReactJS上建立了我的网站，成为SPA。我正在尝试使用React Router v.5.2.0。我有一个名为ToDoList.js的示例应用程序，该应用程序应该位于投资组合页面上的URL下方。由于某种原因，它可以在我的本地主机上正常工作，但是当我将其部署到Netlifly并托管在我的Github上时却无法正常工作。 here上线时似乎无效。浏览器上的后退按钮似乎也无法正常工作。

Portfolio.js：

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

浏览器中的URL更新为正确的URL，但不会加载组件。在我的App.js文件中，我有两种类型的路由，因此示例应用程序（待办事项列表）未显示顶部导航。有效

App，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。请参阅有关嵌套here

的文档演示

此外，为了直接链接到https://www.aubreyhlaverty.com/portfolio/todo-list，您应该将200重定向添加到Netlify _redirects文件，例如this。可能还会帮助您解决其他问题。

/* /index.html 200

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

1 个答案: