React-router 无法单独显示每个组件

Question

我正在迁移到 ReactRouter v4，但事实证明它对我来说很麻烦。我在 app.js 中有一个文件，我试图在其中设置一个简单的路由系统。

import React, { Component } from 'react';
import { Router, Route, IndexRoute, hashHistory, Redirect } from 'react-router';
import LoginPage from './LoginPage';
import NavigationBar from './NavigationBar';

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <Route exact path='/' component={NavigationBar}></Route>
        <Route exact path='/login' component={LoginPage}></Route>
      </Router>
    );
  }
}

代码编译得很好，但由于某些原因在浏览器上，当 url 为 localhost:3000/login

时，导航栏而不是登录页面显示

The image of the nagivation bar showing instead of the login

我原本打算将登录显示在 /login 上，将导航栏显示在 / 上，但导航栏同时显示在 /login 和 / 上。我一直在关注 react-router training guide here 上的示例，但我似乎无法弄清楚我做错了什么。

Answer 1

也许这只是您的 post 中的错字，但您扩展的是 Compoent 而不是 Component。如果您的代码中发生这种情况，我猜您会看到比获取错误组件更糟糕的问题。

我更喜欢 BrowserRouter（我不必支持旧版浏览器），但我让你的代码像这样工作：

import React, { Component } from 'react';
import { Route } from 'react-router';
import { HashRouter as Router } from 'react-router-dom';

import LoginPage from './LoginPage';
import NavigationBar from './NavigationBar';

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path='/' component={NavigationBar}></Route>
          <Route exact path='/login' component={LoginPage}></Route>
        </div>
      </Router>
    );
  }
}

您必须安装 react-router-dom 才能将此代码添加到运行。

正在访问 http://localhost:3000/#/login, I get the Login component. If you change HashRouter to BrowserRouter, you can see your component render at http://localhost:3000/login。

React-router 无法单独显示每个组件

React-router having trouble display each of the components on its own

reactjs

react-router

react-router-v4