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游戏下，但随后我又添加了/ 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>

它必须位于动态路径之前...

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

1 个答案: