React redirecting to show page

[tarkzc]

App.js

class App extends Component {
  constructor(props) {
    super(props)
      this.state = {
       games: [] ,
       name: '',
       img_url: '',
       genre: '',
       platforms: '',
       video_url: '',
       description: '',
       hasSubmitted: false,
    }
    // Binds methods to the state
       this.handleSubmit = this.handleSubmit.bind(this)
       this.handleChange = this.handleChange.bind(this)
  }


handleSubmit = (e) => {
        e.preventDefault();
        const { name, img_url, genre, platforms, video_url, description } = this.state;

  // Post request to the server
       axios.post('http://localhost:4000/api/games', { name: name, img_url: img_url, genre: genre, 
          platforms: platforms, video_url: video_url, description: description })
         .then((result) => {
            this.setState({
              hasSubmitted: true
           })
        });
      }

<main>
            <Route exact path='/games' render={() => {
              return this.state.hasSubmitted
                ? <Redirect to="/games/:name" />
                : <GameForm handleChange={this.handleChange} handleSubmit={this.handleSubmit} 
                      games={this.state.games} />
            } }
          />
            <Route exact path='/games' render={() => {
                return (
                <GameIndex handleChange={this.handleChange} handleSubmit={this.handleSubmit} 
                      games={this.state.games} />
              )
              } }
            />
            <Route exact path="/games/:name" component={GameShow}/>
</main>

----------------------------------------------------------------------------------------------------
GameIndex.js

class GameIndex extends Component {
    render() {
     let videoGames = this.props.games.map((game, i) =>{
     let pathname = `/games/${game.name}`

    return (
        <div key={i}>
               <p><Link to={{ pathname, state: {selectedGame: game}}}> {game.name}</Link></p>
               <Link to={{ pathname, state: {selectedGame: game}}}> <img src={game.img_url} . 
                  alt="game_pic" /></Link>
         </div>
    )
  })

I want to redirect to game's show page after I submit the create form but I got this error:

[tarkzc]

App.js

class App extends Component {
  constructor(props) {
    super(props)
      this.state = {
       games: [] ,
       name: '',
       img_url: '',
       genre: '',
       platforms: '',
       video_url: '',
       description: '',
       hasSubmitted: false,
       newGame: {}
    }
    // Binds methods to the state
       this.handleSubmit = this.handleSubmit.bind(this)
       this.handleChange = this.handleChange.bind(this)
  }


handleSubmit = (e) => {
        e.preventDefault();
        const { name, img_url, genre, platforms, video_url, description } = this.state;

  // Post request to the server
       axios.post('http://localhost:4000/api/games', { name: name, img_url: img_url, genre: genre, 
          platforms: platforms, video_url: video_url, description: description, comments: [] })
         .then((result) => {
            this.setState({
              hasSubmitted: true,
               newGame: result.data
           })
        });
      }

<main>
            <Route exact path='/games' render={() => {
              let gameName = this.state.newGame.name
              return this.state.hasSubmitted
                ? <Redirect to={{pathname: `/games/${this.state.newGame.name}`, state: 
                    {selectedGame: gameName}}} />
                : <GameForm handleChange={this.handleChange} handleSubmit={this.handleSubmit} 
                    games={this.state.games} />
              } }
          />
            <Route exact path='/games' render={() => {
                return (
               <GameIndex handleChange={this.handleChange} handleSubmit={this.handleSubmit} 
                      games={this.state.games} />
              )
              } }
            />
            <Route exact path="/games/:name" component={GameShow}/>
</main>

----------------------------------------------------------------------------------------------------
GameIndex.js

class GameIndex extends Component {
    render() {
     let videoGames = this.props.games.map((game, i) =>{
     let pathname = `/games/${game.name}`

    return (
        <div key={i}>
               <p><Link to={{ pathname, state: {selectedGame: game}}}> {game.name}</Link></p>
               <Link to={{ pathname, state: {selectedGame: game}}}> <img src={game.img_url} . 
                  alt="game_pic" /></Link>
         </div>
    )
  })

----------------------------------------------------------------------------------------------------
GameShow.js

class GameShow extends Component {
  constructor(props) {
    super(props)
    this.state = {
      game: this.props.location.state.selectedGame
    }
  }

  render() {
    let gameComments = this.state.game.comments.map((comment, i) =>{
          return (
            <div key={i}>
              <li>{comment}</li>
            </div>
          )
        })

Made some progress but right now I got this error:

[superbuggy]

this.state.game was a a string!