React Router v4 将导航栏移动到单独的文件

Question

我目前正在尝试使用 react router v4 将我的导航栏与 ReactDOM.render() 函数分开。但是如何使用新的反应路由器 v4 和 Link 组件将导航栏移动到单独的文件？

我的申请起点client.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';

import store from './store';

import NavBar from './components/NavBar.react';
import WelcomePage from './components/Pages/Welcome.react';
import LoginPage from './components/Pages/Login.react';

const app = document.getElementById('app');

ReactDOM.render(
  <Provider store={store}>
      <Router>
        <div>
          <NavBar />

          <Route exact path="/" component={WelcomePage} />
          <Route path="/login" component={LoginPage} />
        </div>
      </Router>
  </Provider>, app);

我的独立导航栏文件NavBar.react.js:

import React from "react";
import { connect } from "react-redux";
import { Link } from 'react-router';

export default class NavBar extends React.Component {
  render() {
    return (
      <div>
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/login">Login</Link></li>
        </ul>

        <hr/>
      </div>
    )
  }
}

运行此代码抛出以下错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `NavBar`.
at invariant (invariant.js:44)
at instantiateReactComponent (instantiateReactComponent.js:74)
at instantiateChild (ReactChildReconciler.js:44)
at ReactChildReconciler.js:71
at traverseAllChildrenImpl (traverseAllChildren.js:77)
at traverseAllChildren (traverseAllChildren.js:172)
at Object.instantiateChildren (ReactChildReconciler.js:70)
at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:226)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)

如果我删除行 <NavBar /> 或将我的 NavBar 的 JSX 内容移动到 client.js 文件，它会工作...

直到现在我才在互联网上找到一些例子，人们将他们的导航栏集成到 ReactDOM.render() 函数中。

Answer 1

您正在从 Navbar 组件中的“react'router”导入 Link。如果您同时安装了 "react-router" 和 "react-router-dom"，这将起作用，但您可能想要做的只是 import { Link } from 'react-router-dom';，因为看起来您已经安装了 react-router-dom .

React Router v4 将导航栏移动到单独的文件

React Router v4 move navbar to separat file

navbar

reactjs

react-router