Question

我有一个元素，仅当我在“ /”路线上时才要显示（如果正在更改），我想隐藏该元素我应该如何正确做？我正在使用react-router-dom来更改我使用的路由，所以我想这就是问题，我缺少什么？，我也尝试使用if（history.location =='/'）then / else 它不起作用

Answer 1

您可以使用<Route />中的react-router-dom组件。

来自official react-router docs：

Route组件可能是React Router中了解和学习使用的最重要的组件。它的最基本职责是在其路径与当前URL匹配时呈现一些UI。

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";

const Home = () => (
  <h1>My Home Component</h1>
);

const App = () => (
  <BrowserRouter>
    <Route exact path="/">
      <Home />
    </Route>
  </BrowserRouter>
);

render(<App />, document.getElementById("root"));

Codesandbox示例：https://codesandbox.io/s/cranky-albattani-b0y03?file=/src/index.js

基于路线的条件渲染

1 个答案: