javascript - 链接不呈现ReactJS的组件。 URL更改但页面没有？ - Thinbug

链接不呈现ReactJS的组件。 URL更改但页面没有？

时间：2017-09-18 18:55:04

标签： javascript reactjs react-dom

这是我的main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Home from './Home.jsx';
import Contact from './Contact.jsx';
import About from './About.jsx';
import { BrowserRouter as Router, Route, IndexRoute } from 'react-router-dom';
import {history } from 'history';

ReactDOM.render(  (
<Router history = {history}>
    <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'));

这是我的App.jsx

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

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 default App;

这是我的About.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class About extends React.Component {
render() {
    return (
        <div>
            <h1>About...</h1>
        </div>
    )
   }
}

export default About;

这是我的index.html

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <title>React App</title>
</head>

<body>
    <div id = "app"></div>
    <script src = "index.js"></script>
</body>
</html>

代码在浏览器中呈现。 - 家 - 关于 - 联系

问题： - 当我在浏览器链接上单击关于URL更改为（http://localhost:8080/about）的链接时。但是没有显示About.jsx页面。我不知道原因是什么？请帮助。

1 个答案:

答案 0 :(得分：2)

您忘记在路线名称前加斜杠（for(int i =0; i< hosts.length; i++) { DataStream<String> someStream = env.socketTextStream(hosts[i], ports[i]); DataStream<Tuple2<String, String>> joinedAdImpressions = rawMessageStream.rebalance() ... }）。

更新：同样，从导入路径中删除/扩展名。见下文：

.jsx