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

我还有一个关于START_OF_FILE INSERT_EMPLOYEE 123456 John Smith 64000 35 INSERT_EMPLOYEE 345678 Mike Jones 70000 30 INSERT_EMPLOYEE 234567 Dean Thomas 72000 40 PRINT_ROSTER PRINT_EMPLOYEE John Smith PRINT_EMPLOYEE Mike Jones PRINT_EMPLOYEE Dean Thomas END_OF_FILE的问题。在旧版本中我们有这个，但在较新版本反应路由器没有提供这个。那么我可以在较新版本中使用什么来使用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无法正常工作

1 个答案: