Question

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

这是我的App.js：

cat 61_0:

\#%Module1.0

set curNameVersion  [module-info name]

set curName [lindex [split $curNameVersion "/"] 0]

set var_name "61_PAT"   

set install_path /soft/qq/61_0

if { [module-info mode load] } {    

    puts stderr "loaded $curNameVersion"

    if { [info exists env($var_name)] } {  

        if { $env($var_name) != $install_path } {  

            puts stderr "rm loaded $curName"

            module unload $curName

        }

    }

}

setenv $var_name $install_path

puts stderr "done 61_0"


.
.

   61_1 modulefile is basically similar to 61_0 except set install_path /soft/qq/61_1 and puts stderr "done 61_1"

   61_2 modulefile is basically similar to 61_0 except set install_path /soft/qq/61_2 and puts stderr "done 61_2"

3.

^Linux^:  module add qq/61_0

loaded qq/61_0

done 61_0


^Linux^:  module add qq/61_1

loaded qq/61_1

rm loaded qq

loaded qq/61_0

done 61_0

done 61_1


^Linux^:  module add qq/61_2

done 61_0

done 61_0

done 61_0

..

...

done 61_0

done 61_0

done 61_2


4. 

^Linux^:  module list

Currently Loaded Modulefiles:

  1) qq/61_0   2) qq/61_1   3) qq/61_2

^Linux^:  echo $_LMFILES_ 

/software/qq/61_0:/software/qq/61_1:/software/qq/61_2

^Linux^:  echo $LOADEDMODULES 

qq/61_0:qq/61_1:qq/61_2

Car.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>

    );
  }
}

Answer 1

所以你至少需要2条路线，除非/ Cars是唯一一个你不需要路由的页面！：）

在此示例中，当您的网址类似于Home

时，系统会显示http:/www.exmaple.com/组件

当网址为Cars

时，系统会显示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>
);

如果您不想手动输入网址来更改视图...您必须包含指向相应视图的<Link />或<NavLink />。< / p>

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

您可能希望在WEB documentation页面查看react-router ReactTraining.com's react-router。他们是创建和维护react-router的人。好文档也好！

反应路由器组件不渲染

1 个答案: