反应路由器不匹配路由

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个可能发生的问题。包括修复您的无路径匹配路线。

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