javascript - react router v4 不呈现任何其他路由

标签 javascript reactjs react-router

我正在尝试实现 React 路由器,但遇到的问题很少。请在下面找到代码:

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

注册组件和容器的代码如下: 组件: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;

容器: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。谁能告诉我。

谢谢

最佳答案

解释如下:React-router urls don't work when refreshing or writting manually

当您尝试直接转到该链接时,您的服务器找不到匹配的文件来注册。

方案一:用HashRouter代替BrowserRouter。

解决方案 2:使用回退技术设置服务器,当找不到匹配的文件时回退到“/”。

关于javascript - react router v4 不呈现任何其他路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45861468/

相关文章:

javascript - 将图像更改为 Blob 在 IE11 中不起作用

reactjs - 如何删除 React Router 中的最后历史记录?

javascript - setInterval 数组

javascript - 为什么会出现 "this"行为?

javascript - 静态元素交互

javascript - 组件中的 SetTimeout 在 react 中执行两次

javascript - 在三元运算符中 React Router <Link>

javascript - 覆盖 native Javascript 函数

javascript - Jquery 工具提示和 CSS

reactjs - 在react-router 2.4中将props传递给路由