带有渲染器的路由器不在另一个组件中传递道具

Question

我有 2 个 class 组件 PhoneDirectory.js 和 App.js

class PhoneDirectory extends Component {
  render() {
    return (
      <BrowserRouter>
        <Routes>
          <Route exact path="/" element={<App />} render={(props) => <App {...props} name="test" />} />
        </Routes>
      </BrowserRouter>
    )
  };
}

export default PhoneDirectory;

另一个Class组件

class App extends Component { 
  render() {
    console.log("value:", this.props.name);
    return (
    );
  }
}

export default App;

这里 App.js 我在控制台日志中未定义。

Answer 1

在 react-router-dom@6 中不再有 component 和 render 和 children 功能道具，它们被一个 element 道具取代 ReactNode、a.k.a。 JSX。您可以传递额外的道具。

示例：

<Route path="/" element={<App name="test" />} />

...

class App extends Component{
  componentDidMount() {
    console.log("value:", this.props.name);
  }

  render() {
    return ....;
  }
}

export default App;

带有渲染器的路由器不在另一个组件中传递道具

Router with render not passing props in another component

reactjs

react-router

react-props