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

它需要在动态路径之前......