React Router Link 未加载页面

Question

我试图从我的主页 App.js 重定向到单击按钮的页面，但我的重定向页面 /SelectAirport 似乎没有加载。我认为 link 路径可能有问题，但我不知道如何修复它。

TLDR：link 更改但内容未加载。

App.js

function App() {

    return(
        
        <div>
            <Button>
                <Link to="./SelectAirport">Select Airport</Link>
            </Button>
        </div>
    )
}
export default App;

完整代码在这里 - https://codesandbox.io/s/boring-chihiro-zckfr5?file=/App.js:152-355

Answer 1

你的路线在哪里？您必须首先为 select-airport 或类似的东西创建一条路线。目前，您只是尝试直接加载一个组件。

路线可能如下所示：

 import SelectAirport from "./SelectAirport";
 <Route path="select-airport" element={<SelectAirport />} />

在此之后，Link 将开始工作，对于您的情况，link 应该类似于：

<Link to="/select-airport">Select Airport</Link>

因此，每当它命中 select-airport 时，它都会尝试通过 route 找到匹配的组件并加载该组件。

可以在此处找到基本示例。 https://v5.reactrouter.com/web/example/basic (v5)

https://reactrouter.com/docs/en/v6/getting-started/overview (v6)

v6 代码示例：https://stackblitz.com/github/remix-run/react-router/tree/main/examples/basic?file=src%2FApp.tsx

Answer 2

使用路由和路由，在路由内部定义组件和路径，例如 path='/airports'

import { Button } from "@mui/material";
import React from "react";
import { NavLink } from "react-router-dom";
import SelectAirport from "./SelectAirport";
import {
    Routes,
    Route,
} from "react-router-dom";

function App() {
    return(
        <div>
            <Button>
                <NavLink to="/airports">Select Airport</NavLink>
            </Button>
            <Routes>
                <Route path='/airports' element={<SelectAirport/>}  />
            </Routes>
        </div>
    )
}
export default App;

沙盒示例Working example

React Router Link 未加载页面

React Router Link not loading the page

reactjs

react-router

react-link