我正在尝试为我的React项目设置React-Router,但由于某些原因无法正确设置路径。在路由器设置中,Indexroute的组件可以正常工作,但是当我尝试时,要访问注册页面,我会收到错误"无法获取/辛格普"enth。
依赖项:
"dependencies": {
"express": "^4.16.2",
"nodemon": "^1.14.12",
"path": "^0.12.7",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^3.0.5",
"webpack": "^3.10.0",
"webpack-dev-middleware": "^2.0.4"
}
routes.js
import React from 'react'
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
import Greetings from './components/Greetings';
import SignupPage from './components/signup/SignupPage';
export default(
<Route path="/" component={App} >
<IndexRoute component={Greetings} />
<Route path="signup" component={SignupPage} />
</Route>
)
app.js
import React, { Component } from 'react';
import NavigationBar from './NavigationBar'
class App extends Component {
render() {
return (
<div className="container">
<NavigationBar />
{this.props.children}
</div>
);
}
}
export default App;
signuppage
import React, { Component } from 'react';
class SignupPage extends Component {
render() {
return (
<div>
<h1>hey iam sign up page</h1>
</div>
);
}
}
export default SignupPage;
尝试像这样包装路由器组件
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
<Router history={browserHistory}>
<Route path="/" component={App} >
<IndexRoute component={Greetings} />
<Route path="signup" component={SignupPage} />
</Route>
</Router>
感谢您的答复,这是错误的,在提供文件时是错误的。
在这里,我仅设置"/"的路径,因此,当我发送"/注册"请求时,我会收到错误'无法获取/注册',因为没有相同的请求映射
app.get('/',(req,res) => {
// send file as response
// __dirname -- > points to current director
res.sendFile(path.join(__dirname,'./index.html'));
})
要解决它,我必须为任何请求URL
设置请求映射app.get('/*',(req,res) => {
// send file as response
// __dirname -- > points to current director
res.sendFile(path.join(__dirname,'./index.html'));
})