Question

我在遵循React路由器教程HERE和HERE

时遇到此错误

它应该像它应该的那样工作，因为在index.html中我添加了＆＃34; app＆＃34;作为div容器中的id。

_registerComponent(...): Target container is not a DOM element.
     ./src/index.js
     src/index.js:15

这是INDEX.JS

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import About from './modules/About'
import Repos from './modules/Repos'

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

ReactDOM.render((
    <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
     </ul>

     <hr/>
     <App />
     <Route exact path="/" component={App}/>
     <Route path="/repos" component={Repos}/>
     <Route path="/about" component={About}/>
   </div>
 </Router>
), document.getElementById('app'));

INDEX.HTML

<!doctype html>
<html>
<head>
       <title>My First React Router App</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

Answer 1

我面临着同样的问题-
我的src / index.js看起来像这样-

struct

我将所有路由移动到了变量ReactDOM.render(<App />,routing, document.getElementById('root'));中，现在src / index.js文件中的代码看起来像-

routing

因此，无需再在ReactDOM中传递import React from 'react'; import ReactDOM from 'react-dom'; import { Route, BrowserRouter as Router } from 'react-router-dom'; import './index.css'; import App from './App'; import About from './pages/abouts/about'; import Contact from './pages/contacts/contact'; import * as serviceWorker from './serviceWorker'; const routing = ( <Router> <div> <Route exact path="/" component={App} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </div> </Router> ) ReactDOM.render(routing, document.getElementById('root')); serviceWorker.unregister();，这对我有用。

React Router：目标容器不是DOM元素

1 个答案: