簡體   English   中英

如何正確設置反應路由器v3?

[英]how to setup react router properly v3?

我正在嘗試為我的React項目設置react-router,但由於某種原因無法正確設置路徑。在路由器設置中,IndexRoute的組件工作正常,但是當我嘗試訪問注冊頁面時,出現錯誤“無法GET / singup”。任何提示我在哪里出錯?

依賴關系:

"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>

感謝您的答復,從node.js提供文件時出錯

在這里,我只為“ /”設置路徑,所以當我發送對“ / 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'));
})

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM