ルートに一致しないルータを応答します

Question

クエリ文字列に基づいて反応コンポーネントをレンダリングしようとしています。クエリー文字列はクイズ/ 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; 

Answer 1

あなたは、あなたが4にルータ3に反応から移行する場合に発生する可能性がある問題の一部を回避する方法を確認するには、以下の例では、ルータ4ルックを反応させるのにお互いの周りのルートをラップすることはできません。あなたのパスがない場合の修正をルートにマッチさせます。 ..私の問題を解決し にルートリストをラッピング@win

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') 
 
);