Question

据我所知，为了使反应按预期运行，我们需要提供要在页面上显示的内容以及导航到所需页面的方法。

这意味着我们至少需要在两个地方有相同的路径信息：

应用展示
用于更改页面的导航栏。

我很好奇是否有一种最佳做法可以将这个定义保留在一个地方但可以在多个位置访问它。

我正在做的事情看起来像这样：

App.js

const home = "/"
const away = "/away"

function App() {
   return {
       <Router>
          <Navbar home={home} away={away}/>
          <Switch>
             <Route exact path={home}>
                <Home/>
             </Route>
             <Route exact path = {away}>
                <Away/>
             </Route>
          </Switch>
       </Router>
              
          
   }
}

Navbar.js

  Navbar = ({home, away}) -> {
  
  return (
      <NavLink exact to={home}>Home</NavLink>
      <NavLink exact to={away}>Away</NavLink>
  )
}

随着时间的推移，这会变得越来越麻烦，所以我想知道这样做的“标准”方法是什么。

Answer 1

共享路径并没有真正的“标准”方式，但您可以这样做的一种方法是将路径作为变量存储在包含页面的模块中，然后导出它并将变量导入两者应用程序和导航栏。例如：

// Home.jsx
export default function Home() { /* ... */ }
export const homePath = '/home';


// Away.jsx
export default function Away() { /* ... */ }
export const awayPath = '/away';


// App.jsx
import { Home, homePath } from './Home';
import { Away, awayPath } from './Away';

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path={homePath}>
          <Home />
        </Route>
        <Route exact path={awayPath}>
          <Away />
        </Route>
      </Switch>
    </Router>
  );
}

// Navbar.jsx
import { homePath } from "./Home";
import { awayPath } from "./Away";

export default function Navbar({ home, away }) {
  return (
    <>
      <NavLink exact to={homePath}>
        Home
      </NavLink>
      <NavLink exact to={awayPath}>
        Away
      </NavLink>
    </>
  );
}

在反应中处理链接和显示路径

1 个答案: