Question

我是React Router的新手。

当我单击“链接”时，URL呈现在地址栏中，但内容没有呈现。这是使用React-Router版本4的。当我单击导航栏中的链接时，我希望能够访问列出的链接，例如“主页”或“博客文章”页面。

导航栏组件

import React, { Component } from "react";
import { render } from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Blogpost from "./Blogpost";


export default class Navbar extends Component {
render() {
    return (
        <BrowserRouter>
        <div id="header">
            <Link to='/app'>App</Link>
            <Link to='/'>Blogpost</Link>

        </div>
        </BrowserRouter>
    );
  }
}

家庭组件

import React, { Component } from "react";
import { database } from "../firebase";
import _ from "lodash";
import renderHTML from "react-render-html";
import "../App.css";
import App from "./App";
import Header from "./Header";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Blogpost from "./Blogpost";

export default class Home extends Component {

....

render() {
return (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/Home" component={Home} />
        <Route exact path="/" component={Blogpost} />
      </Switch>
      <Header />
      <br />
      <div className="homeData">{this.renderPosts()}</div>
    </div>
  </BrowserRouter>
  );
 }
}

Index.js组件

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import Home from "./components/Home";
import Blogpost from "./components/Blogpost";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<Blogpost />, document.getElementById("root"));

serviceWorker.unregister();

React Router更改了URL，但未呈现新组件

0 个答案: