(ReactJS + Redux) Форма не загружается при добавлении / new в URL

Question

Я работаю над простым проектом React / Redux / Rails, и у меня проблема с загрузкой формы.У меня настроен маршрутизатор, который содержит маршруты на моей странице App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import '../App.css';
import Navbar from '../components/Navbar'
import Home from '../components/Home'
import Games from './Games'
import GamesShow from './GamesShow';
import GameForm from './GameForm';

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <Switch>
            <Route exact path = '/' component={Home} />
            <Route exact path = '/games' component={Games} />
            <Route exact path = '/games/:id' component={GamesShow} />
            <Route exact path = '/games/new' component={GameForm} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

На другой странице есть ссылка, которая ведет на /games/new.

<Link to="/games/new" exact>Add a new Game</Link>

страница загружается под URL, но страница черная, за исключением компонента Navbar.Я должен упомянуть, что я даже не пытаюсь загрузить форму, просто пример текста.Я импортирую все, поэтому я знаю, что мой импорт / экспорт не проблема.

   import React, { Component } from 'react';

class GameForm extends Component {
    render() {
        return(
            <div> 
                Add a new game to the List
                <form onSubmit={this.handleOnSubmit}>
                    <div>
                        <label htmlFor="name">Name:</label>
                    </div>
                </form>
            </div>
        )
    }
}

export default GameForm

Все становится странно, когда я удаляю новое из / games / new и комментирую исходный игровой маршрут, затем он загружаетКомпонент GameForm под URL игры, но потом добавляю / новый обратно, он перестает работать.Теперь я думаю, что это охватывает все, но вот мой index.js на всякий случай.

  import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux'
import store from './store'

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)


serviceWorker.unregister();

Answer 1

Вам нужно переместиться на '/games/new' выше '/games/:id'

Примерно так:

  <Switch>
    <Route exact path = '/' component={Home} />
    <Route exact path = '/games' component={Games} />
    <Route exact path = '/games/new' component={GameForm} />
    <Route exact path = '/games/:id' component={GamesShow} />
  </Switch>

Это должно предшествовать динамическому пути ...