Question

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

main.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'));

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'而且我按照互联网教程的步骤但是我可以'看得对。有什么想法吗？

Answer 1

您需要将标题放在路径中，因为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;

Answer 2

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

修改

我尝试了以下内容并且有效。它只是一个“create-react-app”基础应用程序，其中包含react-router @ 4和react-router-dom @ 4。

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'));

App.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;

Routes.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，但除此之外，我看不出为什么我的代码应该工作而你的代码不应该有任何原因。

无法正常反应路由器dom工作

2 个答案: