Question

我想使用React Router构建一个简单的天气预报应用程序。这是我的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, IndexRoute, hashHistory} from 'react-router-dom';
var Main = require('Main');
var Weather = require('Weather');
var About = require('About');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>
            <Route path="/Weather" component={Weather} />
            <Route path="/About" component={About} />
        </Route>
    </Router>,
    document.getElementById('app')
);

当我尝试上面的代码时，我收到一条警告：

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

当我将代码更改为：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, IndexRoute, hashHistory} from 'react-router-dom';
var Main = require('Main');
var Weather = require('Weather');
var About = require('About');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main} />
        <Route path="/Weather" component={Weather} />
        <Route path="/About" component={About} />
    </Router>,
    document.getElementById('app')
);

我收到错误消息A <Router> may have only one child element。

我该怎么做才能解决这个问题？

Answer 1

包裹div中的所有路线，如下所示：

ReactDOM.render(
    <Router history={hashHistory}>
        <div>
           <Route path="/" component={Main} />
           <Route path="/Weather" component={Weather} />
           <Route path="/About" component={About} />
        </div>
    </Router>,
    document.getElementById('app')
);

或使用Switch：

ReactDOM.render(
    <Router history={hashHistory}>
        <Switch>
           <Route path="/" component={Main} />
           <Route path="/Weather" component={Weather} />
           <Route path="/About" component={About} />
        </Switch>
    </Router>,
    document.getElementById('app')
);

Answer 2

你可以解决第二个问题只有一个子元素通过在路由器中放置div标签并将所有路由放入其中，如下所示

[DllImport("user32", SetLastError = true)]
private static extern bool RegisterHotKey(IntPtr hWnd, int id, uint fsModifiers, uint vk);
[DllImport("user32", SetLastError = true)]
private static extern bool UnregisterHotKey(IntPtr hWnd, int id);

React Router v4中的嵌套组件

2 个答案: