react-router 没有渲染任何东西

Question

I created my app with create-react-app and trying to use react-router on it. but it's not working at all.

Here's my 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;

my 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;

and my index.js here.

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')
);

• Don't worry about Home, Login, Register thing on index.js . They are super fine.

Am I doing something wrong?

Answer 1

Ho if you're v4* of react-router it won't work that way you should install react-router-dom and import it.

That's the way I did it

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'));

Note: Don't forget to wrap the route in a wrapper or it'll throw an error!

and to set 404 page just provide another route without any path to it.If no routes found it will be rendered.

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

** Bonus point If you're new to react-router you may fall in a problem of rendering multiple routes at the same time. But you want to render only one route at a time. at this point.

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

Then

/*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

If you are using React Router 4, as said by other comments, you have to use 'react-router-dom' in order to import it in your component.

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

you can now give any component as a children of Router (it has to be a single node).

The main difference from the normal RR2-3 is that now every route is a simple component, and you can put it along with other components.

You don't have IndexRoute anymore, you just put the routes in the order you want:

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

there are more than a couple of things to understand, in the options of Route, the use of Switch, Redirect and other very useful components. Try to spend some time on some good documentation since it is a very good version, and it will stick around for a while.

If you can have a look at this wonderful introduction: https://egghead.io/courses/add-routing-to-react-apps-using-react-router-v4

and the doc website: https://reacttraining.com/react-router/

Answer 3

The correct format is

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

I read all the answers here but didn't manage to solve my problem, untill I reached out to the 'react-router-dom' guide itself. you can read the simplifies guide there and in about 5~10 mins you will figure this out. mainly, it was wrong placing with the components.

Answer 5

May not be your case but this could help someone else. In my case none of it worked. Turned out to be a case with parcel cache. Delete the parcel cache folder and ran npm run dev again and it worked.