Home.js

Question

TypeError：无法读取 App React Router 中未定义的属性“params”

2021-01-27

1842

javascript reactjs react-router react-router-dom

每当我在控制台中记录 props.match.params 时，我都会收到错误：

TypeError：无法在 App 中读取未定义的属性“params” 。我不确定这是否相关，但即使我 console.log(props)，我也会得到四个空数组。以下是所有相关代码：

Home.js

import React from "react";
import App from "./App";
import { render } from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
} from "react-router-dom";

const Home = () => {
  return (
    <div>
      <Router>
        <Route exact path="/">
          <App />
        </Route>
        <Route path="/:roomCode" component={App} />
      </Router>
    </div>
  );
};

export default Home;

App.js（仅相关部分）

const App = (props) => {

  console.log(props.match.params);

};

export default App;
const appDiv = document.getElementById("app");
render(<App />, appDiv);

过去两天我一直在试图弄清楚这一点。什么都没用。此外，history.push 也不起作用，返回非常相似的错误。我感觉我的项目中的 react-router-dom 坏了。非常感谢您的帮助。

编辑：这是 codesandbox： https://codesandbox.io/s/reverent-microservice-iosu2?file=/src/App.js

Answer 1

您的 Home 组件是所有组件的根，因此需要将其传递给 render 函数，而不是 App ，后者是 Home 的后代。

进行此更改后，您需要在 Home 组件中更改此行：

<Route exact path="/" render={(props) => <App {...props} />} />

import React from "react";
import App from "./App";
import { render } from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
} from "react-router-dom";

const Home = () => {
  return (
    <div>
      <Router>
        <Route exact path="/" render={(props) => <App {...props} />} />
        <Route path="/:roomCode" component={App} />
      </Router>
    </div>
  );
};

export default Home;

以下是渲染方法：


const appDiv = document.getElementById("app");
render(<Home />, appDiv);

现在您可以获取 props


const App = (props) => {
  console.log(props.match.params);
};

export default App;

Answer 2

您可以尝试使用 React Router 框架提供的 React hooks。有几种不同的 hooks 可用于与路由器交互。

const App = () => {
    const { roomCode } = useParams()
    console.log(params);
  };

更多信息请点击此处