Javascript 使用React路由器时不显示任何内容
我遵循了这一点,当Javascript 使用React路由器时不显示任何内容,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我遵循了这一点,当main.js中的所有代码。但是,如果我将代码放在单独的文件中,它将不起作用: app.jsx import React from 'react'; import Link from 'react-router'; export default class App extends React.Component { render() { return ( <div> <ul>
main.js
中的所有代码。但是,如果我将代码放在单独的文件中,它将不起作用:
app.jsx
import React from 'react';
import Link from 'react-router';
export default class App extends React.Component {
render() {
return (
<div>
<ul>
<li><Link to="/Home">Home</Link></li>
<li><Link to="/About">About</Link></li>
<li><Link to="/Contact">Contact</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
export class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
从“React”导入React;
从“反应路由器”导入链接;
导出默认类App扩展React.Component{
render(){
返回(
- 家
- 关于
- 接触
{this.props.children}
)
}
}
导出类Home扩展React.Component{
render(){
返回(
家
)
}
}
导出类关于扩展React.Component{
render(){
返回(
关于
)
}
}
导出类Contact扩展React.Component{
render(){
返回(
联系
)
}
}
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
import App, { Home, About, Contact } from './app.jsx';
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'));
从“React”导入React;
从“react dom”导入react dom;
从“react Router”导入{Router,Route,Link,browserHistory,IndexRoute};
从“/App.jsx”导入应用程序,{Home,About,Contact};
ReactDOM.render((
),document.getElementById('app');
也许导出不起作用?在我的控制台中,我有一些警告:
index.js:9169警告:React.createElement:type不应为null,
未定义、布尔或数字。它应该是一个字符串(对于DOM)
元素)或类(用于复合组件)。检查渲染
App的方法
导入链接的方式不正确
import Link from 'react-router';
应该是
import { Link } from 'react-router'
导入链接的方式不正确
import Link from 'react-router';
应该是
import { Link } from 'react-router'
谢谢我忘了,谢谢!我忘了。