React Router 无法正常工作

Question

我从 react Router v2 升级到 v4 然后一切都坏了！我在 google 上搜索有错误，了解到最新版本的 React 路由器完全重写了。我试图按照文档更新我的应用程序。但是我从官方文档中复制了代码并且它运行良好但是当我使用我的组件和结构时它不是路由。我无法弄清楚实际问题。一切似乎都很好，但仍然没有路由。

更新

我确实找到了问题所在。它是从 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

中阅读更多相关信息

React Router 无法正常工作

React Router isn't working properly

reactjs

react-router

react-router-v4