React路由帮助路由不实际跳转到页面

Question

所以我对 React 和 React 路由还很陌生，如果这很简单，请原谅我。我看到有人问过类似的问题，但不是我要找的，或者我对它的理解还不足以弄清楚。

问题：如何获取路由跳转页面？它在 URL 中发生了变化，但貌似没有变化。 (localhost:8080/#/listings?_k=26kljm) 与 localhost:8080/

相同

不管怎样，这就是我所拥有的

main.js

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory } from "react-router";

import Layout from "./components/Layout";
import Listing from "./components/pages/Listings";
import NoMatch from "./components/partials/NoMatch";

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

ReactDOM.render(
<Router history={hashHistory}>
  <Route path="/" component={Layout}>
    <Route path="/listings" name="listings" component={Listing}></Route>
   </Route>
 </Router>,
app);

Layout.js

import React from "react";

import Footer from "./partials/Footer";
import Body from "./pages/Index";
import Header from "./partials/Header";

export default class Layout extends React.Component {

 render() {
   return (
     <div>
       <Header/>
       <Body />
       <Footer />
     </div>
   );
  }
}

Header.js

这个太长了，所以请原谅你，但你应该知道还有一个 link

<Link to="/listings">Listings</Link>

最后

Listings.js

import React from "react";

import Header from "../partials/Header";
import Footer from "../partials/Footer";

export default class Listings extends React.Component {
  render(){
    return(
        <div>
            <Header />
            <div class="row">
                <div class="col-md-8">
                    <h1>THIS SHOULD BE HERE</h1>
                </div>
            </div>
            <Footer />
        </div>
      );
   }
 }

感觉自己漏掉了一些小东西，或者对组件没有很好的掌握。

注意：我刚刚在源代码中注意到 Link 创建了一个这样的 href 列表

为什么会有多余的哈希值！？如果我直接转到 localhost:8080/listings

，我会得到一个 Cannot GET /listings

Answer 1

乍一看，我在你的代码中找不到任何错误。但我建议您查看最适合您情况的反应路由器示例： https://github.com/reactjs/react-router

只需克隆此存储库，运行 npm install 和 npm start。然后您可以浏览 URL http:localhost:8080 中的示例。当您查看 "Active Links" example 时，您会注意到它准确地显示了您想要的内容（HashHistory 除外，但您可以手动添加它而无需太多工作）。

希望这对您有所帮助。

很多问候

Answer 2

所以问题在于我是如何理解组件的。这里的关键是{this.props.children}

也通过更改 Layout.js：

export default class Layout extends React.Component {
  render() {
    return (
      <div>
        <Header/>
        {this.props.children}
       <Footer />
     </div>
   );
 }

}

main.js

ReactDOM.render(
   <Router history={hashHistory}>
   <Route path="/" component={Layout}>
        <IndexRoute component={Index}></IndexRoute>
        <Route path="/listings" name="listings" component={Listing}></Route>
   </Route>
</Router>,
app);

使路由正常工作

React路由帮助路由不实际跳转到页面

React routing help routing not actually jumping to the page

javascript

reactjs

react-router

main.js

Layout.js

Header.js

Listings.js

main.js