title: TypeError: this.props.location.state is undefined -
body: <p>I have a little problem with my application developed in ReactJS.
  Here are my components <strong>App.js</strong>, <strong>AppFront.js</strong> and <strong>index.js</strong>.</p>
  
  <p>Index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter } from 'react-router-dom';
  import './index.scss';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  
  ReactDOM.render(
    &lt;BrowserRouter&gt;
      &lt;React.StrictMode&gt;
        &lt;App /&gt;
      &lt;/React.StrictMode&gt;
    &lt;/BrowserRouter&gt;,
    document.getElementById('root')
  );
  
  serviceWorker.unregister();
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from 'react';
  import { Switch, Route } from 'react-router-dom';
  import AppFront from './AppFront';
  import WizardList from './wizard/WizardList';
  import './App.scss';
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/" component={AppFront} /&gt;
          &lt;Route path="/wizard/:id" component={WizardList} /&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>AppFront.js</p>
  
  <pre><code>import React from 'react';
  import Wizard from './wizard/Wizard';
  
  function AppFront() {
    return (
      &lt;div className="AppFront"&gt;
        &lt;Wizard /&gt;
      &lt;/div&gt;
    );
  }
  
  export default AppFront;
  </code></pre>
  
  <p>In the application, I have a "Wizard" folder in which are included the components "dataWizard.js", "Wizard.jsx" and "WizardList.jsx"</p>
  
  <p><a href="https://i.stack.imgur.com/roNOO.png" rel="nofollow noreferrer">folder-structure</a></p>
  
  <p>The <strong>"dataWizard.js"</strong> file contains an array of objects.</p>
  
  <pre><code>export const dataWizard = [
    {
      id: "1",
      name: "Harry Potter",
      category: "Gryffondor",
      text: "Harry is a powerful wizard."
    },
    {
      id: "2",
      name: "Drago Malefoy",
      category: "Serpentard",
      text: "Draco Malfoy is not very brave."
    }
  </code></pre>
  
  <p>The "Wizard.jsx" component loops on this table and transmits the properties with the  component of "react-router-dom".</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import { dataWizard } from './dataWizard';
  import './style/Wizard.scss';
  
  
  class Wizard extends Component {
    render() {
      return (
        &lt;div className="Wizard"&gt;
          {
            dataWizard.map((wizard, i) =&gt;
            &lt;Link
              to={{ pathname: `/wizard/${wizard.id}`, state: { wizard } }}
              key={i}
            &gt;
              &lt;span className="name"&gt;{wizard.name}&lt;/span&gt;
              &lt;span className="category"&gt;{wizard.category}&lt;/span&gt;
            &lt;/Link&gt;
            )
          }
        &lt;/div&gt;
      );
    }
  }
  
  export default Wizard;
  </code></pre>
  
  <p>I recover the properties without problem with the component "WizardList.jsx".</p>
  
  <pre><code>import React, { Component } from 'react';
  import './style/WizardList.scss';
  
  
  class Wizard extends Component {
    render() {
      const wizard = this.props.location.state.wizard;
      return (
        &lt;div className="WizardList"&gt;
          &lt;div className="container"&gt;
            &lt;span className="name"&gt;{wizard.name}&lt;/span&gt;
            &lt;span className="category"&gt;{wizard.category}&lt;/span&gt;
            &lt;span className="text"&gt;{wizard.text}&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Wizard;
  </code></pre>
  
  <p>Only when I reload the page, or try to access it directly by typing the path in the URL bar, an error message appears and this.props.location.state is undefined.</p>
  
  <p>Here are some pictures in progressive order to help you better understand my problem.</p>
  
  <p><a href="https://i.stack.imgur.com/K5p9U.png" rel="nofollow noreferrer">Homepage - number 1</a></p>
  
  <p><a href="https://i.stack.imgur.com/MbGYe.png" rel="nofollow noreferrer">Information about sorcerer after click - number 2</a></p>
  
  <p><a href="https://i.stack.imgur.com/sFPG2.png" rel="nofollow noreferrer">I am trying to go directly to the informative page on the sorcerer. - number 3</a></p>
  
  <p><a href="https://i.stack.imgur.com/h0Qiq.png" rel="nofollow noreferrer">Error message - number 4</a></p>
  
  <p>Please, I am a beginner, and I have tried several methods seen on the web, but I still cannot resolve this problem. Please, help-me! :) </p>