单击< Link>时，React Router 4.1.1无法呈现 [英] React Router 4.1.1 does not render when I click on a <Link>

问题描述

我只是试图点击一个组件并反应重新呈现需要渲染的内容。但我根本无法存档。这就是我到目前为止：

I am simply trying to click on a component and have react rerender what is needed to be rendered. But I simply can't archive that. This is what I have so far:

Index.js（这是我试图存储所有路线的地方）

Index.js (This is where I tried to store all my routes)

import React from "react";
import ReactDOM from "react-dom";
import Main from "./pages/index/main.js";
import Login from "./pages/signin/signin.js";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
ReactDOM.render(
  <div>
    <Router>
      <Switch>
        <Route exact  path="/" render={()=> <Main />}/>
        <Route path="/login" render={()=> <Login />}/>
      </Switch>
    </Router>
  </div>,
  document.getElementById("root")
);

Header.JS（我设置Link标签的地方）

Header.JS ( Where I have the Link tags setup )

import React from "react";
import style from "./../acc/css/navbar.css";
import { BrowserRouter as Router, Link} from "react-router-dom";
export default class Header extends React.Component {
    render() {
        return (
            <Router>
    <section className={style.nav} id="nav">
            <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/login">Login</Link></li>
            </ul>
        </section>
        </Router>
        );
    }
}

截至目前，当我手动转到 / ，它呈现 Main 组件，当我手动转到 / login ，它呈现 Login 组件。

As of now, when I manually go to /, it renders the Main component, and when I manually go to /login, it renders the Login component.

然而，当我点击< Link> 组件时，它不会渲染，只是更改指向 / login 的网址，反之亦然。

However, when I click on the <Link> component, it doesn't render, it just changes the URL to /login or vise versa.

我想知道这个问题是否有任何解决方案？

I was wondering if there is any solution to this issue?

Main.js代码

import React from "react";
//import compunts
import Header from "./../header.js";
import Qoute from "./qoute.js";
import Grades from "./grades.js";

export default class Main extends React.Component {
    render() {
        return (
      <div id="continor">
                <Header />
                <Qoute />
                <Grades />
            </div>
        );
    }
}

Signin.js

Signin.js

    import React from "react";
    import Header from "./../header.js";
    import Qoute from "./qoute.js";
    import Form from "./form.js";
    export default class Login extends React.Component {
        render() {
            return(
          <div>
          <Header />
            <section id="info">
              <div className="containor">
                <div className="row">
                  <Qoute />
                  <Form />
                </div>
              </div>
            </section>
          </div>
            );
        }
    }

为了澄清，我试过了

<Route exact path="/" component={Main}/>

但仍然不起作用。任何解决方案？

and that still doesn't work. Any solutions?

推荐答案

尝试将您的Header.js更改为，

Try changing your Header.js as,

import React from "react";
import style from "./../acc/css/navbar.css";
import { BrowserRouter as Router, Link} from "react-router-dom";
export default class Header extends React.Component {
    render() {
        return (
    <section className={style.nav} id="nav">
            <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/login">Login</Link></li>
            </ul>
        </section>
        );
    }
}

点击它显示的链接。

这篇关于单击< Link>时，React Router 4.1.1无法呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！