Question

我刚刚开始学习反应js并创建了一个示例应用程序，其中应用程序具有内容的页眉，页脚。要在每个页面上添加页眉页脚，我创建了root.js并在那里包含页眉，页脚。作为props.children可以呈现每个嵌套路由，我在root.js中添加了{this.props.children}。

但是当我点击任何链接时，没有任何事情发生，前一页（主页）仍然呈现。

我无法理解最新情况以及如何解决这个问题。请帮助我，它已经花了我2天搜索谷歌。

修改：

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

中添加了链接

但现在又出现了另一个问题。每当我刷新页面，一切都消失了。找不到页面节目

修改：

现在在页面刷新后通过在

中添加这些行来工作

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

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

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

Answer 2

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

示例：

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

而不是：

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

为了便于阅读和清洁代码，最好将部分分成组件，在自己的组件中形成，自己的联系信息等等

React Link不起作用

2 个答案: