如何正确使用 react-router

Question

Somewhat new to react, and liking the library, but running into all kinds of headaches with the router.

Here is my current code, question is below:

// routes.js

var React = require('react');
var ReactDOM = require('react-dom');
import {Router, Route, IndexRoute, browserHistory} from 'react-router';

import App from './App';
import MainLayout from './components/MainLayout';
import Home from './components/home/Home';
import Product from './components/product/Product';
import Category from './components/category/Category';
import Cart from './components/cart/Cart';
import NotFound from './components/NotFound';

export default (
  <Router history={browserHistory}>
    <Route component={App} >
      <Route path='/' component={Home} />
      <Route path='/product/:productId' component={Product} />
      <Route path='/category/:catNumber' component={Category} />
      <Route path='/cart' component={Cart} />
    </Route>
    <Route path='*' component={NotFound} />
  </Router>
)

Now, I have three major problems, which makes me think that maybe I'm just terribly misunderstanding how the router works.

1) Strange url hashes from react [ http://localhost:3002/#/?_k=xv1opy] , even though they shouldn't be there, as I've already set history={browserHistory}

2) Browser console warnings: "Warning: Location "/" did not match any routes" and "Warning: You cannot change ; it will be ignored." Not sure what's happening here, as I've very clearly defined the Home component to render for path='/'.

3) Probably related, but any time I change routes, the entire application reloads, clearing all my store data. Not ideal, but I think this can be fixed once I fix #1 and (especially) #2.

More information that might be useful:

// app.js render() method

render() {
return (
  <div>
    <Header />
    <Subheader />
    {this.props.children}
    <Footer />
  </div>
);

}

// index.js

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import Routes from './routes';

if ( process.env.NODE_ENV !== 'production') {
  window.React = React;
}

ReactDOM.render(Routes, document.getElementById('main'));

Anyone a bit more familiar with React who can point me in the right direction here? Been pulling my hair out for the past two days on this, and have read seemingly every guide on react-router to no avail.

Answer 1

Your routing is a bit flawed. Try this instead:

<Router history={browserHistory}>
  <Route path='/' component={App} >
    <IndexRoute component={Home} />
    <Route path='product/:productId' component={Product} />
    <Route path='category/:catNumber' component={Category} />
    <Route path='cart' component={Cart} />
  </Route>
  <Route path='*' component={NotFound} />
</Router>

This should solve most, if not all, of your errors.

Answer 2

The Routing can be done easily type "localhost:3000/" type we can get the login page and if only get by creating a login page and other pages component

        import React from 'react';
        import { Component } from "react";
        import { BrowserRouter, Switch, Route } from 'react-router-dom';
        import "bootstrap/dist/css/bootstrap.min.css";
        import login from './components/loginpage-component';
        import signup from './components/signup-component';
        render(){
        return (
         <BrowserRouter>
             <Switch>
                <Route exact path="/" component={login} /> 
                <Route exact path="/signup" component={signup} /> 
                <Route exact path="/live" component={live}/>
             </Switch>  
         </BrowserRouter>
         );
        }

        }
       export default App;

Answer 3

1. install react-router-dom using yarn or npm

   yarn add react-router-dom

2. import react-router like this

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

3. Use it like this

   <Switch> <Route path="/scopes"> <Scopes /> </Route> <Route path={"/disciplines"}> <Disciplines /> </Route> <Route path={"/fields"}> <Fields /> </Route> <Route path={"/issues"}> <Issues /> </Route> <Route path={"/articles"}> <Articles /> </Route> <Route path={"/indexing"}> <Indexing /> </Route> <Route path={"/settings"}> <Settings /> </Route> </Switch>

4. now you can create a link to each router like this

   <Link to="/articles">Articles</Link>

   import Link as: import { Link } from 'react-router-dom'

Answer 4

If you follow this docs https://reactrouter.com/web/guides/quick-start , It says

Step 1: Move to the project folder and type npm install react-router-dom --save

Step 2: import the route files

App.js

import React from 'react;
import {BrowserRouter as Router,Switch,Route} from "react-router-dom";

import Home from './components/home/Home';
import Product from './components/product/Product';
import Category from './components/category/Category';
import Cart from './components/cart/Cart';

const App = () => {
 return (
  <div>

   <Router>
    <Switch>

      <Route exact path="/">
        <Home />
      </Route>
      //by providing exact attribute will only match if the path matches the exact location else if we don't provide it will never render other components because it renders the first one that matches the current URL 
      <Route path="/product">
       <Product />
      </Route>
      <Route path="/category">
       <Category />
      </Route>
      <Route path="/cart">
       <Cart />
      </Route>
    </Switch>
   </Router>

 </div>
)
}
export default App;