Question

我正在尝试使用历史记录创建基本路由器，

import {BrowserRouter, Route} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory'
...

render() {
        return (
            <BrowserRouter>
            <Switch>
                <Route path="/login" component={PageA}/>
                <Route path="/dashboard" component={PageB}/>
                <Route path="/companies" component={PageC}/>
            </Switch>
            </BrowserRouter>
        )
    }
}

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

但我不断得到：

Uncaught Error: React.Children.only expected to receive a single React element child

该错误在控制台中重复四次。

我在论坛上关注了许多其他答案，但仍然无法正常工作。

这有什么问题？

Answer 1

要保持干净：

您应该像这样在src中创建一个history.js：

import createHistory from 'history/createBrowserHistory';

export default createHistory();

在您的index.js中导入Router而不是BrowserRouter并将历史作为道具传递，如下所示：

import {Router, Route, Switch} from 'react-router-dom';
import history from '../history' // relative path to the file you created above...
...

render() {
        return (
            <Router history={history}> // pass it as a prop here...
              <Switch>
                <Route path="/login" component={PageA}/>
                <Route path="/dashboard" component={PageB}/>
                <Route path="/companies" component={PageC}/>
              </Switch>
            </Router>
        )
    }
}

现在您可以在操作等之后使用history.push('/path_you_want')进行重定向...

侧注：如果您不使用redux，这可能是多余的...为了更简单的重定向，请查看库提供的<Redirect />组件...示例中的更多信息：{{ 3}}

在控制台中接收单个React Element子元素

1 个答案: