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

所以我对反应和反应路线非常陌生，如果这很简单，请原谅我。我见过类似的问题被问到，但不完全是我在寻找什么，或者我没有足够的理解来理解它

问题：如何让路由跳转到页面？它在URL中更改，但似乎没有更改。（localhost:8080/#/listings？_k=26kljm）与localhost:8080相同/

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

main.js

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route，IndexRoute，hashHistory}；
从“/components/Layout”导入布局；
从“/components/pages/Listings”导入列表；
从“/components/partials/NoMatch”导入NoMatch；
const app=document.getElementById（'app'）；
ReactDOM.render(
,
应用程序）；

Layout.js

从“React”导入React；
从“/partials/Footer”导入页脚；
从“/pages/Index”导入正文；
从“/partials/Header”导入标题；
导出默认类布局扩展React.Component{
render（）{
返回(
);
}
}

Header.js 这是一个很长，所以我会饶了你，但你应该知道有一个链接

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

列表

最后

Listings.js

从“React”导入React；
从“./部分/标题”导入标题；
从“./partials/Footer”导入页脚；
导出默认类列表扩展React.Component{
render（）{
返回(
这个应该在这里
);
}
}

我觉得我遗漏了一些小东西，或者我对组件没有很好的把握

注意：我刚刚注意到，在源代码中，

链接

创建了如下href 列表

为什么会有额外的杂烩！？

---

如果我直接转到

localhost:8080/listings

，我会得到一个

Cannot get/listings

，乍一看，我在你的代码中找不到任何错误。但我建议您查看react路由器示例，这些示例将非常适合您的情况：

只需克隆此repo，运行

npm安装

和

npm启动

。然后，您可以浏览URL中的示例。 当您查看时，您会注意到它确切地显示了您想要的内容（除了HashHistory，但是您可以手动添加它，而无需做很多工作）

希望这有帮助

---

许多问候语

所以问题在于我如何理解组件。 这里的键是

{this.props.children}

也可以通过更改Layout.js：

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

导出默认类布局扩展React.Component{
render（）{
返回(
{this.props.children}
);
}

}

main.js

ReactDOM.render(
,
应用程序）；

这样可以使路由正确工作

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

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>
      );
   }
 }

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

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