Javascript （ReactJS+；Redux）将/new添加到url时未加载表单

我正在处理一个简单的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;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
导入“../App.css”；
从“../components/Navbar”导入Navbar
从“../components/Home”导入Home
从“./Games”导入游戏
从“/GamesShow”导入游戏展示；
从“/GameForm”导入游戏形式；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

另一个页面上有一个指向/games/new的链接

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

添加新游戏

页面在url下加载，但除了导航栏组件外，页面为黑色。我应该提到，我甚至还没有尝试加载表单，只是一些示例文本。我正在导入所有内容，因此我知道导入/导出不是问题所在

   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

import React，{Component}来自'React'；
类GameForm扩展组件{
render（）{
返回(
将新游戏添加到列表中
姓名：
)
}
}
导出默认游戏形式

当我从/games/new中删除new并注释掉原始的游戏路径时，事情会变得很奇怪，然后它会在游戏url下加载GameForm组件，但当我添加/new back时，它会停止工作。现在我认为这涵盖了所有内容，但这里是我的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();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./containers/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“react redux”导入{Provider}
从“./store”导入存储
ReactDOM.render(
,
document.getElementById（'root'））
)
serviceWorker.unregister（）；

您需要将

'/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>

---

它需要在动态路径之前出现

尝试从链接中删除

exact

：

添加一个不起作用的新游戏。不过我还是要把它去掉。这似乎是不必要的工作！我以前没有想到这一点，但我明白这是为什么。