node.js - react.js引入router文件后报错

问题描述

问 题

我是一个初学者，目前遇到一个问题，没能定位问题的原因和解决
从router.js文件导出 RouteConfig
我的路由文件如下：router.js

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
/* 引入容器组件 */
import Main from './views/index';
import Data from './views/dataSpace';

/* 路由配置 */
const RouteConfig =
    (<BrowserRouter>
          <Route path="/" component={Main}/>
          <Route path="/dataspace" component={Data} />
     </BrowserRouter>)

export default RouteConfig;

入口文件如下：

import 'core-js/fn/object/assign';
//import {Provider} from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
import RouteConfig from './router';
//import store from  './stores/store';
//import Main from './views/index';
//import Data from './views/dataSpace';



ReactDOM.render(
        {RouteConfig}        
        , document.getElementById('app'));

运行后报错：

ReactDOM.render(): Invalid component element

报错截图：

提前感谢大家的指导！

解决方案

index.js

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import ReactDOM from 'react-dom'

const Main = () => (
  <div>main</div>
)
const Data = () => (
  <div>DATA</div>
)
/* 路由配置 */
const RouteConfig = <BrowserRouter>
  <div>
    <ul>
      <li><Link to="/">main</Link></li>
      <li><Link to="/dataspace">data</Link></li>
    </ul>
    <hr/>
    <Route exact path="/" component={Main}/>
    <Route path="/dataspace" component={Data}/>
  </div>
</BrowserRouter>
ReactDOM.render(
  RouteConfig,
  document.getElementById('app'))

注意几点：

1. BrowserRouter只能包裹一个元素，这里加一层<div>
2. 看你评论中的报错,原因是RouterConfig不是组件，所以不能写成<RoterConfig />,它是个element,直接引用就可以。

这里我加了导航链接，方便浏览器查看。不需要可以去掉ul标签的内容。另外，Data只能通过link访问到，直接在浏览器输入localhost:8080/dataspace，只会显示cannot get /dataspace。而通过点击link 导航到dataspace 就可以正常显示DATA了。原因是BrowserRouter需要服务端配合，解决办法，使用HashRouter

这篇关于node.js - react.js引入router文件后报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！