Question

在这里反应noob，我正在尝试使用link v4在我的material-ui工具栏中添加React-router到主页，但我一直收到错误：

元素类型无效：需要一个字符串（用于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从您定义的文件中导出组件。检查LandingToolBar的呈现方法。

我正在尝试复制这里的基本示例https://reacttraining.com/react-router/web/example/basic，而是将顶部列表放在另一个名为LandingToolBar的组件中，但我看不到让它工作。这是我的index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import injectTapEventPlugin from 'react-tap-event-plugin'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';


injectTapEventPlugin();

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

我的app.js：

import React from 'react'
import {Route, BrowserRouter, Switch} from 'react-router-dom'
import LoginPage from "./containers/LoginPage";
import SignUpPage from "./containers/SignUpPage";
import HomePage from "./components/landing/HomePage";
import LandingToolBar from "./components/landing/LandingToolBar";

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <LandingToolBar/>
                    <Switch>
                        <Route path="/" exact component={HomePage}/>
                        <Route path="/login" component={LoginPage}/>
                        <Route path="/signup" component={SignUpPage}/>
                    </Switch>
                </div>
            </BrowserRouter>
        )
    }
}

export default App;

我正在尝试渲染的工具栏组件LandingToolBar：

import React from 'react';
import Link from 'react-router-dom';
import {ToolbarGroup, ToolbarTitle, RaisedButton, Toolbar} from 'material-ui'    

const LandingToolBar = () => (
    <Toolbar>
        <ToolbarGroup>
            <ToolbarTitle text="ETFly"/>
            <Link to="/">feafeaf</Link>
        </ToolbarGroup>
    </Toolbar>
);

export default LandingToolBar;

在路由部分中苦苦挣扎，因为在文档或v4中似乎没有太多解释......

感谢您的帮助！

Answer 1

您需要import Link这样的named import而不是default import：

import {Link} from 'react-router-dom';

检查named vs default import/export.

的答案

React-router在导航栏中添加链接

1 个答案: