即使在使用react-router時設置歷史屬性后，路由類型也不會更改為“browserHistory”

Question

我正在研究基本的reactJs應用程序和路由。 默認情況下，ReactJs使用hashHistory類型的歷史記錄來維護用戶訪問的URL的歷史記錄。 這是我的package.json文件，其中包含我正在使用的所有依賴項的版本：

{
  "name": "scotch-cars",
  "version": "1.0.0",
  "description": "learning routing in reactJs",
  "main": "index.js",
  "scripts": {
    "watch": "webpack -d --watch",
    "build": "webpack",
    "serve" : "serve ./public"
  },
  "author": "Rasik Bihari",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "serve": "^5.2.2",
    "webpack": "^2.6.1"
  },
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^1.0.3"
  }
}

這是我的index.jsx文件，它是起點：

import React, { Component } from 'react';
import { render } from 'react-dom';
import {Router, Route, IndexRoute,browserHistory} from 'react-router';
import Main from './common/main.component.jsx'
import Home from './common/home.component.jsx'
import About from './common/about.component.jsx'
import Car from './car/car.component.jsx'

render(
    <Router>
        <Route path="/" component={Main} history={browserHistory} >
            <IndexRoute component={Home} />
            <Route path="/cars" component={Car}/>
            <Route path="/about" component={About}/>
        </Route>
    </Router>,
    document.getElementById('container')
);

正如您在上面的代碼段中看到的，我設置了history={browserHistory} 。 但是一旦我的開發服務器啟動並且我瀏覽了主路徑，那么reactJs仍然在URL的末尾附加哈希值（以黃色顯示），這意味着它正在使用hashHistory類型的歷史記錄。

有人能指出這里的錯誤嗎？

這是我的webpack.config.js ，它加載了上面顯示的index.jsx文件：

var webpack = require('webpack');
var path = require('path');
console.log(__dirname);
var BUILD_DIR = path.resolve(__dirname, 'public');
console.log(BUILD_DIR);
var APP_DIR = path.resolve(__dirname, 'src');
console.log(APP_DIR);

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },

  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};

module.exports = config;

這是public/index.html文件：

<html>
    <head>
        <!--Stylesheet-->
        <!--<link rel="stylesheet" href="style.css">-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
        <base href="/">
    </head>
    <body>
        <!--Container for React rendering-->
        <div id="container"></div>
        <!--Bundled file-->
        <script src="bundle.js"></script>
    </body>
</html>

代碼為./common/main.component.jsx

import React, {Component} from 'react';

class Main extends Component {
    render(){
        return(
            <div>
                <nav className="navbar navbar-default">
                    <div className="container-fluid">
                        <div className="navbar-header">
                            <a className="navbar-brand" href="#">Scotch Cars</a>
                        </div>
                        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul className="nav navbar-nav">
                                <li className="active"><a href="#">Link <span className="sr-only">(current)</span></a></li>
                                <li><a href="#">Link</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <div className="container">
                    {this.props.children}
                </div>
            </div>
        );
    }
}

export default Main

更新1 ：將history={browserHistory}屬性從Route標記移動到Router標記對所需的輸出沒有影響。

Answer 1

歷史對象不是Route而是Router

這應該工作

 <Router history={browserHistory}>
    <Route path="/" component={Main}  >
        <IndexRoute component={Home} />
        <Route path="/cars" component={Car}/>
        <Route path="/about" component={About}/>
    </Route>
</Router>,

還要升級到更高版本的React路由器至少到v2.0.0。

您可以通過刪除package.json中的react-router條目然后將其安裝為

npm install -S react-router@2.0.0

但是，如果你只是啟動應用程序，你應該使用最新版本的react-router. 即v4.1.1

以下是配置相同的培訓文檔： https ： //reacttraining.com/react-router/web/api/BrowserRouter

即使在使用react-router時設置歷史屬性后，路由類型也不會更改為“browserHistory”

問題描述

1 個解決方案

解決方案1
3 已采納 2017-06-10 04:46:56

即使在使用react-router時設置歷史屬性后，路由類型也不會更改為“browserHistory”

問題描述

1 個解決方案

解決方案1 3 已采納 2017-06-10 04:46:56

解決方案1
3 已采納 2017-06-10 04:46:56