Reactjs React路由器isn'；t工作不正常

我从

react路由器v2

升级到

v4

，然后一切都坏了！我在谷歌上搜索时出错了，发现最新版本的react路由器完全被重写了。我试图按照文档更新我的应用程序。然而，我从官方文档中复制了代码，它工作得很好，但当我使用我的组件和结构时，它不是路由。我想不出实际的问题。一切似乎都很好，但仍然不是路由

更新

---

我确实解决了这个问题。它是通过从

路径

渲染组件实现的。我在代码中使用了

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')
)

从“React”导入React；
从'react dom'导入{render}；
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”；
const About=（）=>(
关于页面
)
常量Home=（）=>(
主分量
)
常量AppComponent=（）=>(
应用程序组件也被渲染
)
渲染(

家
关于
接触


,
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')
)

从“React”导入React；
从'react dom'导入{render}；
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”；
常量注册=（）=>(
这是注册页面
)
常量Home=（）=>(
主分量
)
常量AppComponent=（）=>(
应用程序组件也被渲染
)
渲染(
红色骰子

报名

,
document.querySelector（“#app”）
)

---

我还有一个关于

浏览历史的问题。在旧版本中，我们有这个功能，但在新版本中，react路由器不提供这个功能。那么，在较新版本中，我可以使用什么来处理browserHistory呢？
在最新版本中，您必须使用
BrowserRouter
来替换
browserHistory
选项：

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

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

从'react router dom'导入{BrowserRouter}
... 

您可以在
使用最新版本的

react router dom中了解更多信息。请先检查代码片段。我已经用

react router dom

解决了问题。它是通过从

路径

渲染组件实现的。我在代码中使用了

Component

，但它应该是

Component

，这就是我的代码不起作用的原因。它没有抛出错误！