Question

我有一个将根路径用作slug的站点。不幸的是，我无法让反应路由器打开slug路线。 TestList的路线完美无缺。但它与TestItem打破，我无法在Chrome中调试此内容。

index.js

import { render } from "react-dom";
import React from "react";
import ConditionList from "./src/app/TestList";
import ConditionItem from "./src/app/TestItem";
import { browserHistory, Router, Route } from 'react-router'

const containerEl = document.getElementById("container");

render(
    <Router history={browserHistory}>
        <Route path="/" component={TestList}>
            <Route path="/:slug" component={TestItem}/>
        </Route>
    </Router>,
  containerEl
);

TestList.js

import React, { Component } from "react"
import fetchJsonp from "fetch-jsonp"
import { Link } from 'react-router'

export default class TestList extends Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
    }

    componentDidMount() {
        fetch('http://localhst:8000/api/v1/testentity/', {
            method: 'GET',
            mode: 'cors'
        })
        .then(response => response.json())
        .then(data => this.setState({ data: data }))
        .catch(err => console.error(this.props.url, err.toString()))
    }

    render() {
        return (
            <ul>
                {this.state.data.map(function(test, i){
                    return <li key={i}><Link to={`/${test.slug}`} id={test.id}>{test.name}</Link></li>
                })}
            </ul>
        );
    }
}

Answer 1

通过将--history-api-fallback选项设置为webpack-dev-server

来解决此问题

反应路由器的根路径中的slug问题

1 个答案: