0

我目前有这段代码，当我尝试在我的应用程序中实现 react-router-dom 时：

主.js：

"use strict";
const React = require('react');
const ReactDOM = require('react-dom');
const BrowserRender = require('react-router-dom').BrowserRouter;
const App = require('./components/app');

ReactDOM.render(<BrowserRender> <App /> </BrowserRender>, document.getElementById('app'));

应用程序.js：

$ = jQuery = require('jquery');
const React = require('react');
const Header = require('./common/header');
const Routes = require('../routes');

const App = () => (
    <div>
        <Header />
        <Routes />
    </div>
);

module.exports = App;

和routes.js：

"use strict";
const React = require('react');
const Router = require('react-router-dom');
const Route = Router.Route;
const Switch = Router.Switch;
const Home = require('./components/homepage');
const AuthorPage = require('./components/authors/authorPage');
const About = require('./components/about/aboutpage');

const Routes = () => (
    <div>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/authors" component={AuthorPage}/>
            <Route path="/about" component={About}/>
        </Switch>
    </div>
)

module.exports = Routes;

但是，当我在浏览器上运行它时，我只得到：

Uncaught Error: A <Router> may have only one child element

我尝试了很多东西，起初我使用的是 React-Router，但后来我看到它已被重新实现为“react-router-dom”，我按照互联网教程的步骤进行操作，但我看不到修正它。有任何想法吗？

4

2 回答 2

0

您需要将标头放在路线内，因为browser router只接受一个孩子。

您需要调整路线内的标题。

$ = jQuery = require('jquery');
const React = require('react');

const Routes = require('../routes');

const App = () => (
    <div>
        <Routes />
    </div>
);

module.exports = App;

如果您想Header始终渲染，请执行此操作，

"use strict";
const React = require('react');
const Router = require('react-router-dom');
const Route = Router.Route;
const Switch = Router.Switch;
const Header = require('./common/header');
const Home = require('./components/homepage');
const AuthorPage = require('./components/authors/authorPage');
const About = require('./components/about/aboutpage');

const Routes = () => (
    <div>
        <Route path = "" component = {Header} />
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/authors" component={AuthorPage}/>
            <Route path="/about" component={About}/>
        </Switch>
    </div>
)

module.exports = Routes;
于 2017-06-15T05:26:02.790 回答
0

路由器应该从“react-router”导入，而不是“react-router-dom”（在 routes.js 中）。

编辑

我尝试了以下方法，它可以工作。它只是一个添加了 react-router@4 和 react-router-dom@4 的“create-react-app”基础应用程序。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './App';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

应用程序.js

import React, { Component } from 'react';
import Header from './Header';
import Routes from './Routes';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Routes />
      </div>
    );
  }
}

export default App;

路由.js

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

class Home extends Component {
  render() {
    return <div>Home</div>;
  }
}

class About extends Component {
  render() {
    return <div>About</div>;
  }
}

export default () => (
  <div>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </div>
);

我使用 import 而不是 require，但除此之外，我看不出我的代码应该工作而你的代码不应该工作的任何原因。

于 2017-06-15T05:34:31.743 回答