反應路由器工作不正常

Question

我從react Router v2升級到v4，然後一切都被打破了！我搜索了谷歌的錯誤，並瞭解到最新版本的反應路由器是完全重寫的。我試圖按照文檔更新我的應用程序。不過，我從官方文檔複製代碼，它工作得很好但是當我使用我的組件和結構時，它不是路由。我無法弄清楚實際的問題。一切似乎確定，但仍然不是路由。

更新

我沒有搞清楚的問題。它是從Route渲染組件。我在我的代碼中使用了Component，但它應該是component，這就是爲什麼我的代碼無法工作。它沒有事件拋出一個錯誤！

下面這段代碼工作路由

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

import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom'; 

const About =() => (
    <div>About page</div> 
) 
const Home =() => (
<div>Home component</div> 
) 
const AppComponent =() => (
<div>App component is rendered as well</div> 
) 

render(
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/contact">Contact</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route exact path="/" component={AppComponent}/> 
     <Route path="/about" component={About}/> 
    </div> 
    </Router>, 
    document.querySelector('#app') 
) 

下面這段代碼是不工作的路線

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

import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom'; 

const SignUp =() => (
    <div>This is Sign up Page</div> 
) 
const Home =() => (
<div>Home component</div> 
) 
const AppComponent =() => (
<div>App component is rendered as well</div> 
) 

render(
    <Router> 
    <div className="container"> 
     <nav className="navbar navbar-default"> 
      <div className="container-fluid"> 
      <div className="navbar-header"> 
       <Link to="/" className="navbar-brand">Red Dice</Link> 
      </div> 

      <div className="collapse navbar-collapse"> 
       <ul className="nav navbar-nav navbar-right"> 
       <li><Link to="/signup">Sign up</Link></li> 
       </ul> 
      </div> 
      </div> 
     </nav> 

    <Route exact path="/" Component={Home} /> 
    <Route exact path="/" Component={AppComponent} /> 
    <Route path="/signup" Component={SignUp} /> 
    </div> 

</Router>, 
    document.querySelector('#app') 
) 

我有一個問題關於browserHistory。在舊版本中，我們有，但在新版本反應路由器不提供這一點。那麼我可以在新版本中使用什麼來使用browserHistory？

Answer 1

在最新版本中，您必須使用BrowserRouter更換browserHistory選項：

import { BrowserRouter } from 'react-router-dom' 

<BrowserRouter> 
    <div> ... </div> 
    <Route /> 
    <Route /> 
</BrowserRouter> 

可以在https://reacttraining.com/web/api/BrowserRouter