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>
    );
  }
}

代码编译得非常好，但由于浏览器的某些原因，当网址为localhost：3000 / login

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

The image of the nagivation bar showing instead of the login

我希望登录显示在/ login，导航栏显示在/，但导航栏显示在/ login和/。我一直在关注反应路由器培训指南中的示例，我似乎无法弄清楚我做错了什么。

Answer 1

也许这只是您帖子中的拼写错误，但您正在扩展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，我获得了Login组件。如果您将HashRouter更改为BrowserRouter，则可以在http://localhost:3000/login处看到您的组件呈现。

React-router无法自行显示每个组件

1 个答案: