反应 Link 不工作

Question

我刚开始学习 React js 并创建了一个示例应用程序，其中应用程序有页眉、页脚和内容。要在我创建的每个页面上添加页眉页脚 root.js 并在其中包含页眉和页脚。因为 props.children 可以呈现我在 root.js.

中添加的每个嵌套路由 {this.props.children}

但是当我点击任何链接时，没有任何反应，上一页（主页）仍然呈现。

我不明白这是怎么回事以及如何解决这个问题。请帮助我，我已经花了 2 天时间在 google 上搜索。

编辑:

现在工作正常。问题是我在

中添加了链接

但是现在另一个问题发生了。每当我刷新页面时，一切都消失了。 找不到页面显示

编辑:

现在可以在页面刷新后通过在

中添加这些行来工作

package.json

"scripts": {
    "start": "npm run build",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
    "build:prod": "webpack -p && cp src/index.html dist/index.html"
}

index.js

import React from "react";
import { render } from "react-dom";
import { Home } from "./pages/home/index.jsx";
import { Root } from "./component/layout/root";
import { Blog } from "./pages/blog/index.jsx";
import { About } from "./pages/about/index.jsx";
import { Contact } from "./pages/contact/index.jsx";
import { Portfolio } from "./pages/portfolio/index.jsx";
import { Services } from "./pages/services/index.jsx";
import { Match } from 'react-router'; 
import {BrowserRouter as Router, Route} from 'react-router-dom'
import {IndexRoute, browserHistory, Switch } from 'react-router';

class App extends React.Component {
    render(){
        return(
            <Router>
                <Root>
                    <Switch>
                        <Route exact path={"/"} component={Home} />
                        <Route path="/blog" component={Blog}/>
                        <Route path="/contact" component={Contact}/>
                        <Route path="/portfolio" component={Portfolio}/>
                        <Route path="/about" component={About}/>
                        <Route path="/services" component={Services}/>
                        <Route path="/home" component={Home} />
                    </Switch>
                </Root>
            </Router>
        );
    }
}

render( <App /> , window.document.getElementById("app"));

root.js

import React  from 'react';
import { render } from 'react-dom';
import { Header } from './header/index';
import { Footer } from './footer/index';

export class Root extends React.Component {
    constructor(props){
        super();
    }

    render(){
        return( 
            <div>
                <Header/>
                {this.props.children}
                <Footer/>
            </div>
        );
    }
}

组件:

/blog/index.jsx
/home/index.jsx
/contact/index.jsx




import React from "react";
import {render} from "react-dom";

export class Contact extends React.Component {
    render() {
        return (
    < div id = "fh5co-contact-section" > 
    <div className="container">
    <div className="row">
        <div className="col-md-6 col-md-offset-3 text-center fh5co-heading">
            <h2>Contact</h2>
            <p>
                <span>Created with
                    <i className="sl-icon-heart"></i>
                    by the fine folks at
                    <a href="http://freehtml5.co">FreeHTML5.co</a>
                </span>
            </p>
        </div>
    </div>
    <div className="row">
        <div className="col-md-3">
            <h3>Contact Info.</h3>
            <ul className="contact-info">
                <li>
                    <i className="sl-icon-map"></i>198 West 21th Street, Suite 721 New York NY 10016</li>
                <li>
                    <i className="sl-icon-phone"></i>+ 1235 2355 98</li>
                <li>
                    <i className="sl-icon-envelope-open"></i>
                    <a href="#">info@yoursite.com</a>
                </li>
                <li>
                    <i className="sl-icon-globe-alt"></i>
                    <a href="#">www.yoursite.com</a>
                </li>
            </ul>
        </div>
        <div className="col-md-8 col-md-push-1 col-sm-12 col-sm-push-0 col-xs-12 col-xs-push-0">
            <div className="row">
                <div className="col-md-6">
                    <div className="form-group">
                        <input className="form-control" placeholder="Name" type="text" /></div>
                    </div>
                    <div className="col-md-6">
                        <div className="form-group">
                            <input className="form-control" placeholder="Email" type="text" /></div>
                        </div>
                        <div className="col-md-12">
                            <div className="form-group">
                                <textarea
                                    name=""
                                    className="form-control"
                                    id=""
                                    cols="30"
                                    rows="7"
                                    placeholder="Message"></textarea>
                            </div>
                        </div>
                        <div className="col-md-12">
                            <div className="form-group">
                                <input value="Send Message" className="btn btn-primary" type="submit"/></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        );
    }
}

header.js

import React from "react";
import {render} from "react-dom";
import { Link } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
export const Header = (props) => {
    return(
        <header id="fh5co-header" role="banner">
        <div className="container">
            <div className="header-inner">
                <h1><i className="sl-icon-energy"></i><Link to="/">Lesser</Link></h1>
                <nav role="navigation">
                    <ul>
                        <li><Link className="active"  to="/">Home</Link></li>
                        <li><Link  to="/blog">Blog</Link></li>
                        <li><Link  to="/portfolio">Portfolio</Link></li>
                        <li><Link  to="/services">Services</Link></li>
                        <li><Link  to="/about">About</Link></li>
                        <li><Link  to="/contact">Contact</Link></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    );
};

Answer 1

我在你的 post 中没有看到任何链接，但无论如何你必须使用 React-Router-Dom 中的 NavLink 组件并用它替换任何锚标记。

示例：

<NavLink to="/blog">Blog</NavLink>

而不是：

<a href="/blog">Blog</a>

同样为了可读性和简洁的代码，最好将部分分成组件，表单在其自己的组件中，联系信息在其自己的组件中等等

Answer 2

您可以从 react-router-dom 导入 Link： import Link from 'react-router-dom/Link';

然后使用这个<Link to='url'>display text</Link>

反应 Link 不工作

React Link Doesn't working

javascript

reactjs

react-router

react-router-v4