2017-08-05 206 views
2

我想呈現基於查詢字符串的反應組件。查詢字符串像測驗/ 1,測驗/ 2一樣在瀏覽器地址欄中更改,但相關組件不在呈現,而是每次都在重新加載頁面。反應路由器不匹配路由

我index.js是象下面這樣:

import ReactDOM from 'react-dom'; 
import React, { Component } from 'react' 
import { BrowserRouter as Router, Route, Link, IndexRoute, hashHistory } from 'react-router-dom' 
import App from './App'; 
import QuizInfo from './QuizInfo'; 
import QuizQuestions from './QuizQuestions'; 
import './index.css'; 

const NotFound =() => (
    <h1>404.. This page is not found!</h1>) 

ReactDOM.render(
    (<Router history={hashHistory}> 
     <App> 
      <Route exact path="/" component={App}> 
       <Route path="/quiz" component={QuizInfo} > 
       </Route> 
       <Route path="/quiz/:id" component={QuizQuestions}> 
       </Route> 
       <Route path='*' component={NotFound} /> 
      </Route> 
     </App> 
    </Router>), 
    document.getElementById('root') 
); 

我app.js就像下面我在哪裏的地圖功能渲染元素。

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom' 
import axios from 'axios'; 
import logo from './logo.svg'; 
import BaseData from './baseData'; 
import './App.css'; 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     quiz_list: [], 
     quiz_questions: [], 
    }; 
    this.baseUrl = "http://localhost:8000/quiz/"; 
    }; 
    componentDidMount() { 
    var url = this.baseUrl+"quiz-list"; 
    axios.get(url) 
     .then(res => { 
     const quiz_list = res.data.quizList; 
     console.log(res); 
     this.setState({ quiz_list }); 
     }); 
    } 

    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to Quiz App</h2> 
     </div> 
     <h4> Choose any quiz to attemp</h4> 
     <div className="quiz-list"> 
      {this.state.quiz_list.map((quiz, index) => 
       <li key={index}> 
       <Link to={`/quiz/${quiz.id}`}>{quiz.name}</Link> 
       </li> 
      )} 
     </div> 
     </div> 
    ); 
    } 
} 


export default App; 

回答

3

不能環繞在對方的路由陣營路由器4.看下面的例子來看看如何可以得到周圍的一些,當你從遷移路由器做出反應3〜4個可能發生的問題。包括修復您的無路徑匹配路線。

import ReactDOM from 'react-dom'; 
 
import React, { Component } from 'react' 
 
import { BrowserRouter as Router, Route, Link, hashHistory, Switch } from 'react-router-dom' 
 

 
const App =() => <div>Hi</div> 
 
const QuizInfo =() => <div>Quiz Info</div> 
 
const QuizQuestions = props => <div>{props.match.params.id}</div> 
 
const NotFound =() => <h1>404.. This page is not found!</h1> 
 

 
ReactDOM.render(
 
    <Router history={hashHistory}> 
 
    <div> 
 
     <Link to="/">Home</Link> 
 
     <Link to="/quiz">Quiz</Link> 
 
     <Link to="/quiz/12">Quiz 12</Link> 
 
     <Link to="/gloop">NA</Link> 
 
     <Switch> 
 
     <Route exact path="/" component={App}/> 
 
     <Route exact path="/quiz" component={QuizInfo}/> 
 
     <Route path="/quiz/:id" component={QuizQuestions}/> 
 
     <Route component={NotFound} /> 
 
     </Switch> 
 
    </div> 
 
    </Router>, 
 
    document.getElementById('root') 
 
);

+0

感謝@win ..結束語路由列表爲解決我的問題。但我無法理解爲什麼?有必要在Switch中封裝路由? –

+1

@Noone Switch基本上根據哪條路徑匹配來切換Route。我們不能像上面RR4中的例子那樣包裝路線。由於'/ quiz/12'會首先觸發'/ quiz'路由(因爲命令和交換機),所以'/ quiz'具有確切的路由也很重要, – Win