Router with render not passing props in another component

user_14218835 0
Viewed 32

I have 2 class component PhoneDirectory.js and 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;

The other Class Component

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

export default App;

Here in App.js I am getting undefined in console logs.

react-props react-router reactjs
1 Answers

In react-router-dom@6 there are no longer component and render and children function props, they were replaced by a single element prop taking a ReactNode, a.k.a. JSX. You can pass additional props.

Example:

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

...

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

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

export default App;
user_86908570
Related