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

Question

我正在尝试实现反应路由器，但问题很少。请在下面找到代码：

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

我用作布局的应用程序.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

注册组件和容器的代码如下所示： 组件：索引.js、注册页面.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;

容器：索引.js、注册.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;

它似乎适用于默认路径，但不适用于任何其他路由。 我在这里缺少任何配置。请注意，我使用的是反应路由器v4。任何人都可以让我知道。

谢谢

Answer 1

它在此进行了扩展： 手动刷新或写入时，反应路由器 url

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

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

解决方案 2：使用回退技术设置在找不到匹配文件时回退到"/"的服务器。

Answer 2

您必须将exact添加到第一条路由

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

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

如果您使用 Webpack，请添加：

devServer: {
port: 3000,
historyApiFallback: true
}