javascript - 如何正确使用react-router

Question

有点新的 react ，并且喜欢这个库，但是在路由器方面遇到了各种令人头痛的问题。

这是我当前的代码，问题如下:

//routes.js

var React = require('react');
var ReactDOM = require('react-dom');
import {Router, Route, IndexRoute, browserHistory} from 'react-router';

import App from './App';
import MainLayout from './components/MainLayout';
import Home from './components/home/Home';
import Product from './components/product/Product';
import Category from './components/category/Category';
import Cart from './components/cart/Cart';
import NotFound from './components/NotFound';

export default (
  <Router history={browserHistory}>
    <Route component={App} >
      <Route path='/' component={Home} />
      <Route path='/product/:productId' component={Product} />
      <Route path='/category/:catNumber' component={Category} />
      <Route path='/cart' component={Cart} />
    </Route>
    <Route path='*' component={NotFound} />
  </Router>
)

现在，我遇到了三个主要问题，这让我觉得也许我只是严重误解了路由器的工作原理。

1) 来自 React 的奇怪 url 哈希值 [ http://localhost:3002/#/?_k=xv1opy] ，即使它们不应该在那里，因为我已经设置了history={browserHistory}

2) 浏览器控制台警告:“警告:位置“/”与任何路线都不匹配”和“警告:您无法更改；它将被忽略。”不确定这里发生了什么，因为我已经非常明确地定义了要为 path='/' 渲染的 Home 组件。

3)可能相关，但每当我更改路线时，整个应用程序都会重新加载，从而清除我的所有商店数据。不太理想，但我认为一旦修复#1 和(特别是)#2，这个问题就可以解决。

更多可能有用的信息:

//app.js render() 方法

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

}

//index.js

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import Routes from './routes';

if ( process.env.NODE_ENV !== 'production') {
  window.React = React;
}

ReactDOM.render(Routes, document.getElementById('main'));

任何熟悉 React 的人都可以在这里为我指明正确的方向吗？在过去的两天里，我一直在为此烦恼，并且阅读了几乎所有有关 react 路由器的指南，但都无济于事。

Answer 1

你的路由有点缺陷。试试这个:

<Router history={browserHistory}>
  <Route path='/' component={App} >
    <IndexRoute component={Home} />
    <Route path='product/:productId' component={Product} />
    <Route path='category/:catNumber' component={Category} />
    <Route path='cart' component={Cart} />
  </Route>
  <Route path='*' component={NotFound} />
</Router>

这应该可以解决大部分(如果不是全部)错误。