react-router 没有渲染任何东西

Question

我使用create-react-app创建了我的应用程序，并尝试在其上使用react-router 。 但它根本不起作用。

这是我的Header.js 。

  import React, { Component } from 'react';

class Header extends Component {
    render() {
        return (
          <nav>
                <div className="nav-wrapper blue darken-1">
                    <a className="brand-logo center">Testing</a>

                    <div className="right">
                        <ul>
                            <li>
                                <a><i className="material-icons">vpn_key</i></a>
                            </li>
                            <li>
                                <a><i className="material-icons">lock_open</i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        );
    }
}

export default Header;

我的App.js 。

import React, { Component } from 'react';
import Header from './Header';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="Header">
        <Header />
        {this.props.children}
        </div>
      </div>
    );
  }
};

export default App;

和我的index.js在这里。

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import App from './App';
import Home from './Home';
import Login from './Login';
import Register from './Register';

ReactDOM.render((
  <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}/>
            <Route path="/home" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/register" component={Register}/>
        </Route>
    </Router>),
  document.getElementById('root')
);

• 不用担心index.js上的Home, Login, Register事情。 他们非常好。

难道我做错了什么？

Answer 1

呵呵，如果您是react-router v4 *，它将无法正常工作，您应该安装react-router-dom并将其导入。

我就是那样做的

import {BrowserRouter, Route} from 'react-router-dom';


//modified code of yours
ReactDOM.render((
     <BrowserRouter>
       <div>
         <Route path="/" component={App}>
           <IndexRoute component={Home}/>
           <Route path="/home" component={Home}/>
           <Route path="/login" component={Login}/>
           <Route path="/register" component={Register}/>
         </Route>
      </div>
    </BrowserRouter>),
    document.getElementById('root'));

注意：不要忘记将路由包装在包装中，否则会引发错误！

并设置404页面，只需提供另一条没有任何路径的路由。如果未找到任何路由，则将其呈现。

<Route component={FourOhFour} /> /* FourOhFour component as 404*/

**奖励点如果您是React Router的新手，则可能会遇到同时渲染多条路线的问题。 但是您一次只想渲染一条路线。 这一点。

/*Import Switch also*/
import {BrowserRouter, Route, Switch} from 'react-router-dom';

然后

/*Wrap your route with `Switch` component*/
<BrowserRouter>
    <div>
        <Switch>
            <IndexRoute component={Home}/>
            <Route path="/" component={App}/>
            <Route path="/home" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/register" component={Register}/>
         </Switch>
    </div>
</BrowserRouter>

Answer 2

如果您使用的是React Router 4，如其他评论所述，则必须使用“ react-router-dom”才能将其导入组件中。

import { BrowserRouter as Router } from 'react-router-dom'

现在，您可以将任何组件作为Router的子代（必须是单个节点）。

与常规RR2-3的主要区别在于，现在每条路由都是一个简单的组件，您可以将其与其他组件一起使用。

您不再具有IndexRoute，只需按所需的顺序放置路由即可：

<div>
  <Header />
  <Route path="/blabla/:bla" component={SingleBlaBla} />
  <Route path="/aboutUs" exact component={AboutUs} />
  <Route path="/" exact component={Home} />
  <Footer />
</div>

在“路由”选项，“交换器”，“重定向”和其他非常有用的组件的选项中，需要了解的内容不只两件事。 因为它是一个非常好的版本，所以请花一些时间在一些好的文档上，并且它将持续一段时间。

如果您可以看一下这个精彩的介绍，请访问： https : //egghead.io/courses/add-routing-to-react-apps-using-react-router-v4

和doc网站： https ： //reacttraining.com/react-router/

Answer 3

正确的格式是

import React from 'react';
import { BrowserRouter as Router, Routes, Route,  } from "react- 
router-dom";
import './App.css';
import Home from './components/Pages/Home';

function App() {
return (
 <>
 <Router>
    <Routes>
    <Route exact path='/' element={<Home/>}/>
    </Routes>
  </Router>
 </>
)} 
export default App;

Answer 4

我在这里阅读了所有答案，但没有设法解决我的问题，直到我联系了“react-router-dom”指南本身。 你可以在那里阅读简化指南，大约 5~10 分钟后你就会明白这一点。 主要是组件放置错误。

https:\/\/github.com\/remix-run\/react-router\/blob\/main\/docs\/getting-started\/tutorial.md<\/a>

Answer 5

可能不是您的情况，但这可以帮助其他人。 在我的情况下，它都没有奏效。 原来是包裹缓存的情况。 删除包裹缓存文件夹并再次运行npm run dev并且它工作。