Question

我正在学习反应并遵循教程我因意外行为而停止我的组件无法呈现。这是index.js

import React from 'react';
import { render } from 'react-dom';
import './css/style.css';

import App from './components/app';
import StorePicker from './components/storepicker';

import { Switch, Route } from 'react-router-dom';

const root = () => {
        return (
            <Switch>
                <Route exact path='/' component={StorePicker} />
                <Route path='/store/:storeid' component={App} />
            </Switch>
        )

}

render(<root/>, document.querySelector('#root'));

StorePicker.js

import React from 'react';

class StorePicker extends React.Component {

    render() {
        return (
            <form className="store-selector">
                <h2>Please enter a store</h2>
                <input type="text" required placeholder="Store Name"/>
                <button type="submit">Visit Store</button>
            </form>
        )    
    }
}

export default StorePicker;

导航到http://localhost:3000/我只看到应用背景灰色，没有任何内容呈现。任何建议？该应用程序已成功编译！没有错误。

Answer 1

您未在路由器代码中呈现自己的应用，请参阅此示例：https://reacttraining.com/react-router/web/example/basic

import React from 'react';
import { render } from 'react-dom';
import './css/style.css';

import App from './components/app';
import StorePicker from './components/storepicker';

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

const Root = () => 
  <Router>
    <Switch>
      <Route exact path='/' component={StorePicker} />
      <Route path='/store/:storeid' component={App} />
    </Switch>
  </Router>;

render(<Root />, document.querySelector('#root'));

为什么我的组件无法加载？

1 个答案: