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 下加载，但除导航栏组件外，页面是黑色的。我应该提到的是，我什至还没有尝试加载表单，只是一些示例文本。我正在导入所有内容，因此我知道我的导入/导出不是问题。

   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 并注释掉原始游戏路径时，事情变得很奇怪，然后它会加载 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>

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