我正在尝试实现 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/