javascript - react 路由器组件不呈现

Question

我一直在使用 React Router 并尝试将我的 App.js 和 Car.js 组件路由在一起。我在这两个组件中写了 {this.props.children} 但它仍然无法正常工作。当我部署我的应用程序时，我的本地主机页面上没有任何地方显示 Car.js 组件的任何指示。

这是我的 App.js:

import React, { Component } from 'react';
import Login from './Login.js';
import Search from './Search.js';
import Message from './Message.js';
import Car from './Car.js';
import {BrowserRouter, Route} from 'react-router-dom';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Login />
        <Search />
        <Message />
            <div>
                <BrowserRouter> 
                <Route path="/Car" component={Car}/>
                </BrowserRouter>
                {this.props.children}
            </div>
      </div>

    );
  }
}

汽车.js:

// Car page example 
import React, { Component } from 'react';
import {Router, Route} from 'react-router';

class Car extends Component {
    render(){
        return(
            <div>
                <h1> Cars page </h1>
                {this.props.children}
            </div>
        );
    }
}

export default Car;

Answer 1

因此您至少需要 2 条路线，除非/Cars 是唯一的页面，在这种情况下您不需要路线! :)

在此示例中，Home当您的网址类似于 http:/www.exmaple.com/ 时，将显示该组件

Cars组件将在 url 为 http:/www.exmaple.com/Cars 时显示

const App = () => (
    <div>
        <Login />
        <Search />
        <Message />
        <div>
            <BrowserRouter>
                // you're going to want a default view
                <Route exact path="/" component={Home} />
                // this will be displayed when your url has /Car at the end of it
                <Route path="/Car" component={Car} />
            </BrowserRouter>
        </div>
    </div>
);

如果您不想手动输入 URL 来更改 View ...您将必须包含 <Link />或 <NavLink />指向相应的 View 。

尝试 <NavLink to="/Cars" />并且不要忘记添加 { ... NavLink ... } from "react-router-dom"

你可能想看看 react-router WEB documentation在 ReactTraining.com's react-router页。他们是创建和维护 react-router 的人.也有很好的文档!