React路由帮助路由实际上并没有跳转到页面

React routing help routing not actually jumping to the page

本文关键字：路由 并没有 帮助 实际上 React      更新时间：2023-09-26

所以我对React和React路由非常陌生，所以如果这很简单，请原谅我。我看到过类似的问题，但不完全是我想要的，或者我理解得不够清楚。

问题：如何获得跳转到页面的路由？它在URL中发生了变化，但似乎没有变化。（localhost:8080/#/listsings？_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);

布局.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 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

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

只需克隆此repo，即可运行npm install和npm start。然后，您可以浏览URL http://localhost:8080中的示例。当你看一下"活动链接"的例子时，你会注意到它准确地显示了你想要的内容（除了HashHistory，但你可以手动添加它，而不需要做太多工作）。

希望这能有所帮助。

许多问候

所以问题在于我如何理解组件。这里的关键是{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);

使路由正确工作

相关文章：