Daniil

Можно обрабатывать в асинхронном действии или в компоненте пользователя. Если сервер вернул вместо пользователя 404 и сообщение вроде 'ApiObjectNotFound', делаете редирект на страницу NotFound.

Не забудьте сделать список зарезервированных слов, которые нельзя будет использовать для slug пользователя.

(если react-router версии 4)
У вас в this.props.match.params.user будет то, что человек вбил после / для роута:
<Route path="/:user" component={Profile} />

Следовательно, в componentDidMount комопонента Profile если нужно "эмулировать" загрузку данных, через setTiemout или просто прямо в render компонента, вы можете этим ( this.props.match.params.user ) значением пользоваться и все.

Как вы будете доставать объект юзера из массива с данными, дело ваше. Можно поиском по массиву, можно сделать метод в том же файле и его экспортировать, например:

export function findUserById(id) => {
  // ищем по id элемент в массиве и возвращаем его
}

Примерно так:

<Switch>
  <Route path="/:user_slug" component={Profile} />
  {me && <Redirect exact from="/" to={'/' + me.slug} />}
</Switch>

me - это ваш авторизованный пользователь. Если пользователь авторизован, то me существует и с корневого пути выполняется редирект на его страницу.

Для решения задачи можно использовать свойство isActive.
Демо.

В случае с навигацией, передаете массив элементов в props и рендерите с помощью метода map.
Не забудьте передать каждому элементу свойство key.

Вот по правильному

.highlighted {
  color: red;
  font-weight: bold;
  font-size: 1.5em;
}

class App extends React.Component {
  state = {
    items: [ 'aaa', 'aa1', 'ab1', 'zzz', '00!', 'lorem ipsum dolor...' ],
    search: '',
  }

  render() {
    const { items, search } = this.state;
    const regex = RegExp(search, 'g');
    const replacement = '<span class="highlighted">$&</span>';

    return (
      <div>
        <input value={search} onChange={e => this.setState({ search: e.target.value })} />
        {search &&
        <ul>
          {items.filter(n => n.includes(search)).map(n =>
            <li dangerouslySetInnerHTML={{ __html: n.replace(regex, replacement) }} />
          )}
        </ul>}
      </div>
    );
  }
}

const Input = ({ label, ...props }) => (
  <div>
    <label>
      {label}
      <input {...props} />
    </label>
  </div>
);

class App extends React.Component {
  state = {
    from: 'Москва',
    to: 'Питер',
  }

  onChange = ({ target: { value, name } }) => {
    this.setState(() => ({
      [name]: value,
    }));
  }

  swap = () => {
    this.setState(({ from, to }) => ({
      from: to,
      to: from,
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.swap}>swap</button>
        <Input label="откуда" value={this.state.from} name="from" onChange={this.onChange} />
        <Input label="куда" value={this.state.to} name="to" onChange={this.onChange} />
      </div>
    );
  }
}