鍍金池/ 問答/HTML5  HTML/ react-router 3.0.1 跳轉(zhuǎn)失敗, 頁(yè)面url地址變了,可是視圖不

react-router 3.0.1 跳轉(zhuǎn)失敗, 頁(yè)面url地址變了,可是視圖不變,瀏覽器也沒有報(bào)錯(cuò)

  1. react-router 3.0.1 我配置的路由,用<Link {...this.props} activeClassName="active"/> 跳轉(zhuǎn)失敗, 頁(yè)面url地址變了,可是視圖不變,瀏覽器也沒有報(bào)錯(cuò),不知道什么原因求大神看一下!

2.代碼

app.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {hashHistory, Router, Route, Link } from 'react-router';

import routes from "./Routes/routes";

ReactDOM.render((
  <Router history={hashHistory} routes={routes} ></Router>
), document.getElementById("myApp"));

routes.jsx 路由配置文件

import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Link ,IndexRoute} from 'react-router';

import App from "@/Module/index";
import Goods from "@/Module/goods";

let routes = (
    <Route path="/" component={App}>
      <IndexRoute component={App}/>
      <Route path="goods" component={Goods} />
      <Route path="goods/:id" component={Goods} />
    </Route>
);

export default routes;

header.jsx 導(dǎo)航跳轉(zhuǎn)

import React from 'react';
import {Link } from 'react-router';
import "./style/header.less";
import NavLink from "./NavLink";

class Header extends React.Component {
  constructor(props){
    super(props);
    this.item = [];
  }
  render() {
    return (
        <header className="app-header">
          <nav>
            <NavLink to="/" >首頁(yè)</NavLink>
            <NavLink to="/goods" >商品</NavLink>
            <NavLink to="/goods/5" >商品5</NavLink>
          </nav>
        </header>
    );
  }
} 

export default Header;

NavLink.jsx

import React from 'react';
import { Link } from 'react-router';

class NavLink extends React.Component {
  render() {
    return (<Link {...this.props} activeClassName="active"/>)
  }
};


export default NavLink;

源碼我已經(jīng)發(fā)到github里面了: 大神幫我看看是什么問題https://github.com/w3cui/reac...

回答
編輯回答
北城荒

<Route path="goods" component={Goods} />
<Route path="goods/:id" component={Goods} />
兩個(gè)路由對(duì)應(yīng)的component是一樣的啊,所以路由變了頁(yè)面內(nèi)容一樣

2018年2月9日 00:35