title: How to pass a default params or state to the react router? any alternative approach?
body: <p>I have a state that is list of valid name (valid_list = []). I want to route to home page if someone types a /topics/:name which is not valid. I want o hence pass the valid list to the new component. </p>
  
  <p><strong>I have mentioned all my attempts at the end.</strong></p>
  
  <p>My parent component is this:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { BrowserRouter as Router, Route } from 'react-router-dom'
  
  import Topic from '../topic'
  
  class App extends Component { {
  
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;Route path="/topics/:name" component={Topic} /&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  
  <p>the calling component is </p>
  
  <pre><code>import React,{ Component } from 'react'
  import { Link } from 'react-router-dom' 
  
  class Maintopic extends Component { {
   render() {
      return (
  &lt;div&gt;
      &lt;Link to='/topic:$name' &gt; NextTopic &lt;/Link&gt;
  &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>and called component is something where I am facing issues.</p>
  
  <pre><code>render() {
  
      return (
           &lt;div&gt;
               &lt;h1&gt;{this.props.match.params.name}&lt;/h1&gt;
          &lt;/div&gt;
  
        );
      }
  </code></pre>
  
  <hr>
  
  <p><strong>Attempt 1:</strong></p>
  
  <p>Passing object to link:</p>
  
  <pre><code>&lt;Link to={
             {
                pathname:`/topic/${name}`,
                state:{
                        valid_list : this.state.valid_list
                     }
            }}&gt;
  </code></pre>
  
  <p>And then performing check on the called component by using artlist this.props.location.state.valid_list,</p>
  
  <p><em>Here the problem is if I manually type URL like "/topic/name1" or "/topic/name2" i get error like "TypeError: Cannot read property 'valid_list' of undefined"</em></p>
  
  <p><strong>Attempt 2:</strong></p>
  
  <p>Having called and calling component both have manually stored state in their component</p>
  
  <p><em>Here issues is I really want my valid_list to be dynamic and can be increased visa input button in future implementation. Plus it does not make sense to maintain different copies of same data.</em></p>