首页 文章

反应路由器v4不会呈现任何其他路由

提问于
浏览 次
1

我正在尝试实现反应路由器，但几乎没有问题 . 请找到以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { App, Home, Signup } from './containers';
import routes from './routes';
import { BrowserRouter , Route } from 'react-router-dom'


ReactDOM.render(
  <BrowserRouter>
    <App>
      <Route path='/' component={Home} />
      <Route path='/signup' component={Signup} />
    </App>
  </BrowserRouter>,
  document.getElementById('app')
);

我用作布局的App.js文件如下：

import React, { Component } from 'react';
import { Cheader } from '../components';

class App extends Component {
  render() {
    return(
      <div>
        <Cheader/>
        {this.props.children}
      </div>
    )
  }
}

export default App;

当我导航到http://localhost:3000/时它可以工作，但是当我尝试导航到http://localhost:3000/signup时它不起作用 . 该页面显示以下错误：

Cannot GET /signup

注册组件和容器的代码如下：components：index.js，signuppage.js

import Cheader from './cheader';
import Signuppage from './signuppage';
import Homepage from './homepage';

export {
  Cheader,
  Homepage,
  Signuppage
}

import React from 'react';
import { Grid, Row, Col } from 'react-bootstrap';

const Signuppage = () => (
  <Grid>
    <Row>
      <Col xs={12} sm={12} md={12}>
        This is test
      </Col>
    </Row>
  </Grid>
);

export default Signuppage;

containers：index.js，Signup.js

import App from './App';
import Home from './Home';
import Signup from './Signup';

export {
  App,
  Home,
  Signup
}

import React, { Component } from 'react';
import { Signuppage } from '../components';

class Signup extends Component {
  render () {
    return (
      <Signuppage/>
    )
  }
}

export default Signup;

它似乎适用于默认路径，但不适用于任何其他路径 . 我在这里缺少任何配置 . 请注意我正在使用react-router v4 . 任何人都可以让我知道 .

谢谢

javascript reactjs react-router

2 回答

  • 1

    它在此被公开：React-router urls don't work when refreshing or writting manually

    当您尝试直接转到该链接时，您的服务器找不到与注册匹配的文件 .

    解决方案1：使用HashRouter替换BrowserRouter .

    解决方案2：使用回退技术设置服务器，当找不到匹配的文件时，服务器回退到'/' .

    回复于
  • 0

    你必须将 exact 添加到第一条路线

    <App>
   <Route exact path='/' component={Home} />
   <Route path='/signup' component={Signup} />
</App>

    另一件事可能是您在开发服务器配置中缺少pushState设置

    如果您使用webpack，请添加：

    devServer: {
    port: 3000,
    historyApiFallback: true
  }
    回复于

相关问题