首页 文章

如何正确设置反应路由器 v3？

提问于
浏览 次
0

我正在尝试为我的反应项目设置 react-router 但由于某种原因无法设置路径 properly.In 路由器设置，IndexRoute 的组件工作正常但是当我尝试访问注册页面时，我收到错误“无法获取/singup”.Any 暗示我犯了哪个错误？

依赖关系：

"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;
reactjs react-router

2 回答

  • 1

    尝试像这样包装路由器组件

    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>
    回复于
  • 0

    感谢回复人员，提供文件形式 node.js 时出错

    这里我只为'/'设置路径，所以当我发送'/signup'的请求时，我收到错误'不能 Get/signup'，因为没有请求映射

    app.get('/',(req,res) => {
        // send file as response
        // __dirname -- > points to current director
        res.sendFile(path.join(__dirname,'./index.html'));
    })

    为了解决这个问题，我不得不为任何请求网址设置请求映射

    app.get('/*',(req,res) => {
    // send file as response
    // __dirname -- > points to current director
    res.sendFile(path.join(__dirname,'./index.html'));
})
    回复于

相关问题