反应路由器与路由不匹配

Question

我正在尝试根据查询字符串渲染反应组件。浏览器地址栏中的查询字符串发生变化，例如 quiz/1、quiz/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

在 React Router 4 中，您无法将路由相互环绕。请查看下面的示例，了解如何解决从 React Router 3 迁移到 4 时可能发生的一些问题。包括对 no path 的修复匹配路线。

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