Question

我正在开发一个非常简单的反应应用程序，但是当我尝试使用路由器时，总是使用首字母大写字母的路径名，我不知道为什么。

app.js

import React from "react";
import ReactDOM from "react-dom";
import Layout from "./pages/Layout"
import Basket from "./pages/Basket"
import { Router, Route, IndexRoute, hashHistory } from "react-router"

const app = document.getElementById('app');

ReactDOM.render(
    <Router history={hashHistory}>
    <Route path="/" component={Layout}>
        <IndexRoute component={ItemsList}></IndexRoute>
        <Route path="basket" name="basket" component={Basket}></Route>
    </Route>
    </Router>,
app);

Header.js

import React from "react";
import { Link } from "react-router"

export default class Header extends React.Component {
    render() {
        const { location } = this.props;
        const basketClass = location.pathname.match(/^\/basket/) ? "active" : "";
    return (
        <header>
            <nav class="navbar navbar-default">
                <div class="container">
                    <ul class="nav navbar-nav">
                         <li class={inventoryListClass}><Link to="/">Inventory</Link></li>
                        <li class={basketClass}><Link to="basket">Basket</Link></li>
                    </ul>
                </div>
            </nav>
        </header>
    );
    }
}

现在有人使用大写字母＆＃34; / Basket ＆＃34;当我明确指定＆＃34; 购物篮＆＃34;在路线参数中。

感谢。

Layout.js

import React from "react";

import Footer from "./Footer";
import Header from "./Header";

export default class Layout extends React.Component {

    render() {
        const { location } = this.props
        return (
            <div>
                <Header location={location} />
                <div class="container">
                    {this.props.children}
                </div>
                <Footer />
            </div>
        );
    }
}

Answer 1

顺便说一句，您不必检查有效路线，activeClassName="active"也是如此。

Answer 2

好的，我发现了问题。我把资本资本＆＃34; B＆＃34;在我的header.js中的<link to=Basket这一行

<li class={basketClass}><Link to="Basket">Basket</Link></li>

所以这只是一种类型。对不起伙计们。

路线

2 个答案: